van-list编写下拉加载更多,利用van-list自带的下拉加载事件@load="onLoad",但是发现有次数限制,仍有部分条件下无法下拉加载更多。后来发现原因,执行完,之后finished恢复false,同时将当前页恢复为1,不写的话,代码不会自己恢复,因为这些参数是全局变量,所以会保留最后执行之后的结果。所以,在代码执行前要做一个恢复。细...
情况1: 没有定位,页面高的时候,是html滚动。正常,加载更多的时候,不会出现自动滚动到顶部的问题的。情况2: 使用了定位。 用一个div, absolute定位,overflow-y:auto; 内部的van-list 加载更多的时候,使用等待图this.$toast.loading('加载中...');div 就会自动滚动到顶部。 和这位仁兄的问题现象一样。只不过...
最近在写vue2+vant2的移动端项目,其中有个需求是列表分页,就用到了vant2中的van-list,首次进来,正常上拉加载,执行分页load事件,一切正常~ But!!!在最后一页时,这时候finished已经为true,加载完成,如果此时右上角去刷新页面,会无限加载load事件(当时心中一万个马。。。),试过多种方法,都无果!!!(原因是因为v...
简介:使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能) <template><van-pull-refresh v-model="pullLoading" @refresh="onPullRefresh" success-text="刷新成功"><van-list v-model="listLoading" @load="onLoadList" :finished="finished...
加载完成,finished为true,此时不会触发load事件 在每次请求完毕后,需要手动将loading设置为false,表示加载结束 用法: <van-pull-refresh v-model="rainrefreshing"@refresh="onRefresh"> <van-list v-model="rainloading":finished="rainfinished"finished-text="没有更多了":offset="100"@load="onLoad"> ...
this.finishedList = d.length === 0; //上滑列表加载完了所有数据(没有更多了) } }); this.start++; } // ■■■ } }; 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.
searchLoading设置为false,表示正在上拉加载,列表底部的"加载中..."会显示。 image.png 3、写在<van-list>中的searchFinshed属性,表示数据是否已全部加载完毕,值有两个true/false。特别注意的是,当searchFinshed为true时,列表底部会显示finished-text中的自定义的值没有更多了,且其为true时,searchLoading无论是fa...
<van-list v-model="loading" :finished="finished"></van-list> data () { return { loading: false, // 显示加载更多 finished: false } } finished 的控制能正常,但 loading 无效 同样的问题,可以用finished去控制,但是改变loading的状态无法改变...
如果loading状态没有正确更新,van-list可能会认为还在加载中,从而继续触发onload。 检查数据加载逻辑:确保在onLoad方法中,只有在需要加载更多数据时才发送请求。如果每次调用onLoad都发送请求,无论数据是否已加载完毕,都会导致多次触发。 避免重复请求:如果网络请求较慢,用户可能在请求完成前再次滚动到底部,导致新的请求被...
我刚想到,if长度一样就return 但是加载中一直显示 ,没有出现无更多 回复2019-12-19 philips: @除了BUG啥也不会 @流氓会武术 当长度一样时, 退出循环的同时,再把loading状态改成false就行了吧 回复2019-12-19 除了BUG啥也不会: 嗯,我是return了一个方法 里面写的状态结束,如果直接在if判断里写会报错 ...