最终选择了适用scroll-view自带的滚到底部触发事件scrolltolower事件,虽然这个事件确实能够实现上拉加载数据分页的功能,但是这个是事件存在两个问题。第一个问题就是当滚动条滚动到底部时会多次触发scrolltolower事件,第二个问题是当页面由第一个scroll-view(该页面已经到了的最底部了)切换到第二个scroll-view时会自动...
在uniapp中,scroll-view组件用于实现可滚动视图区域。要在scroll-view中实现触底加载功能,我们需要监听其滚动事件,并在用户滚动到底部时触发加载更多数据的操作。以下是实现这一功能的详细步骤和代码示例: 1. 理解scroll-view组件的基本用法和属性 scroll-view组件在uniapp中主要用于创建可滚动的视图区域,支持垂直滚动和...
使用@scrolltolower事件来监听滚动到底部,然后加载下一页的数据。 实战演练 模板页面 <scroll-view :scroll-y="true" class="block-main block-two-level block-pad" @scrolltolower="scrollBottom"> <view class="scroll-ls" v-for="(item, index) in scrollInfo.list" :key="index"> {{ item }} <...
导语:在日测的开发过程中,经常会碰到页面需要渲染大量数据的情况,这时候就需要用到滚动加载功能,下面总结一下方法。 目录 原理分析 实战演练 案例展示 原理分析 使用@scrolltolower事件来监听滚动到底部,然后加载下一页的数据。 实战演练 模板页面 <scroll-view :sc
scroll-y="true" class="scroll-Y" @scrolltolower="lower">的scrolltolower触底事件失效,你可以检查看看是否你设置的scroll-view滚动区域之外还有其他区域是滚动的,比如在滑动模块外面整个页面都可以滑动,那么这样这个scroll里面的滑动触底就失效了,因为他分不清是整个页面的触底事件还是页面内部这个scroll部分的触底。
uni-app在页面的生命周期中提供onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发 在页面中 使用时 onReachBottom 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底...
具体案例如下：在项目中创建一个滚动列表页面，展示文章列表。使用uni-app的scroll-view组件构建滚动容器，根据用户滚动行为触发加载更多文章的事件。通过Ajax请求后端接口，获取下一页的文章数据，更新列表展示内容。此过程确保了页面的流畅加载和用户体验。总结以上内容，滚动触底加载的关键在于合理利用uniapp...
</view> <view class="loading-text"> {{ finish ? '没有更多数据~' : '正在加载...' }} </view> </template> :host { display: block; } /* 分类标题 */ .caption { display: flex; justify-content: center; line-height: 1; padding...
uniapp解决scroll-view滑动事件失效问题@scrolltolower 1、首先scroller-view需要给定高度,这里的高度最好不要是width:num%这种类型的,很容易不生效。 2、父容器最好也指定高度 下面通过举例来说明 <template> <view class="main"> <scroll-view class="scroll-content" scroll-y @scrolltolower="reachBottom"> ...
</view> </scroll-view> </view> </template> exportdefault{ data() {return{ refresh:false, info: [], } }, computed: { scrollH:function() { let sys=uni.getSystemInfoSync(); let winWidth=sys.windowWidth; let winrate= 750 /winWidth; let winHeight...