1. 理解uniapp触底加载更多的原理 触底加载更多,即在用户滚动页面到底部时,自动触发加载下一页数据的操作。这通常通过监听页面的滚动事件来实现,当滚动到底部时,触发加载数据的逻辑。 2. 在uniapp项目中添加触底事件监听 在uniapp中,可以使用scroll-view组件的@scrolltolower事件来监听触底事件。该事件在用户滚动到sc...
最终选择了适用scroll-view自带的滚到底部触发事件scrolltolower事件,虽然这个事件确实能够实现上拉加载数据分页的功能,但是这个是事件存在两个问题。第一个问题就是当滚动条滚动到底部时会多次触发scrolltolower事件,第二个问题是当页面由第一个scroll-view(该页面已经到了的最底部了)切换到第二个scroll-view时会自动...
具体案例如下：在项目中创建一个滚动列表页面，展示文章列表。使用uni-app的scroll-view组件构建滚动容器，根据用户滚动行为触发加载更多文章的事件。通过Ajax请求后端接口，获取下一页的文章数据，更新列表展示内容。此过程确保了页面的流畅加载和用户体验。总结以上内容，滚动触底加载的关键在于合理利用uniapp提...
<scroll-view:scroll-top="scrollTop"scroll-y="true"class="scrollView"@scrolltolower="ScrollToLower"></scroll-view> data(){return{page:1,//分页初始化allpage:1,//接口返回总分页status:'loadmore',//加载状态}} //获取数据接口getList(){this.http({url:"/cpgl/sjgdlbjk",data:{pageNo:this.p...
</scroll-view> 在方法中写 //触底加载数据 bottomOut() { this.status = 'loading';//滑到底部的时候显示状态为加载中 this.page += 1;//请求页数+1 //判断没数据后停止请求接口数据,并修改显示状态为没有更多 if(this.page >= 6){ this.status = 'nomore'; ...
要实现用户上拉加载更多数据 滚动区域scroll-view以及它的监听事件@scrolltolower :区域滚动的性能不如页面的周期函数onReachBottom 函数名说明onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。(api文档) 实现 页面中添加onReachBottom上拉触底事件。
showToast({ title: '没有更多数据', icon: 'none', duration: 2000 }); } uni.showLoading({ title: '加载中' }); // 请求 this.getList() } 方式二 scroll-view 文档:https://uniapp.dcloud.net.cn/component/scroll-view.html 使用竖向滚动时,需要给一个固定高度,通过 css 设置 height; 使用...
初始化时,加载4张card,并设置content的高度为客户端屏幕的高度,以实现触底加载更多。 加载更多方法loadMore触发时,触发新的请求,获取接下来的四张card。以此直到 没有更多card,就显示noMore。 主要知识点: 底部触发加载更多 使用uni-App的组件 <scroll-view class="content" v-bind:style="{height:contentH+'px'...
</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= parseInt(sys.windowHeight *winrate);returnwinHeight; }, }, ...
uni-app在页面的生命周期中提供onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发 在页面中 使用时onReachBottom可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50...