vant-list上拉加载onload事件触发多次

场景：
3个tab页签切换时，调用不同接口，在某一个tab只要翻页到>=2的情况，当它再点击到另一个tab的时候，另外一个tab就会连续调用两次查询接口
（因为它不仅触发了created还触发了onload事件：且顺序为：进入created调用查询接口，在.then之前，异步查询还未返回的时候，又会去触发onload事件，在current+=1之后再次进行查询）

知识点运用：

一、基础用法
List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
二、List 的运行机制是什么？
List 会监听浏览器的滚动事件并计算列表的位置，当列表底部与可视区域的距离小于offset时，List会触发一次 load 事件。
三、为什么 List 初始化后会立即触发 load 事件？
List 初始化后会触发一次 load事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭。
四、为什么会连续触发 load 事件？
如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load事件，直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数，理想情况下每次请求获取的数据条数应能够填满一屏高度。
五、loading 和 finished 分别是什么含义？
List有以下三种状态，理解这些状态有助于你正确地使用List组件：
非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）
加载中，loading为true，表示正在发送异步请求，此时不会触发load事件
加载完成，finished为true，此时不会触发load事件在每次请求完毕后，需要手动将loading设置为false，表示加载结束

这次遇到的问题，可以利用第五点，解决方法：
在进入created的发送请求之前，将this.loading = true , ⇒⇒⇒ (利用：加载中，loading为true，表示正在发送异步请求，此时不会触发load事件)，让系统知道此时正在异步请求数据，让它别触发onload事件

代码：

<van-listv-model="loading" class="van-list-style" :immediate-check="false":finished="finished" :finished-text="finishedText":error.sync="error" error-text="请求失败，点击重新加载"@load="onLoad"><div class="list" v-if="dataList.length > 0"><div class="list-box2" v-for="(item,index) in dataList" :key="index" @click="handleClick(item)">………………………………………</div></div><div v-if="noData" style="margin-top:30%"><img src="@/common/imgs/no-data.png" alt="" style="width:100%"></div>
</van-list>data() {return {dataList:[],current:1,size:10,loading: false, // 上拉加载 ?????? finished: false, // 上拉加载完毕error: false, // 是否展示错误finishedText:"没有更多了",noData:false, // 是否展示没有数据的图片// offset: 100 // 滚动条与底部距离小于 offset 时触发load事件}},created() {// 调用列表查询接口this.init(this.tab)},methods:{init(val) {if(val === '1') {this.createList(1,10)} },//查询接口
createList(current,size) {let param = { current:current, size:size }// 重点！！！！！！！！！在这里将loading置为true***this.loading = true;***createList(param).then(res=>{let that = thisif(res.status == true) {//赋值const dataList = res.body.recordsconst pages = res.body.pages// 如果返回数据为空if(dataList == null || dataList.length === 0) {that.finished = truethat.finishedText = "没发现任何东西，去其他地方逛逛吧～"that.noData = truereturn}// 加载状态结束  可以写在这里也可以写在finally里面that.loading = false;// 根据当前页进行数据处理if(that.current === 1) {that.dataList = dataList} else {that.dataList = that.dataList.concat(dataList)}// xxx！！！最后一页不足10条的情况 ，这样写实际有问题，因为如果是最后一页为10条的情况，就会第二次去调用接口//if(dataList.length < that.size) {// that.finished = true//that.finishedText = '没有更多了';//}// 使用这种！！ 证明已经是最后一页了if(that.current = pages) {that.finished = truethat.finishedText = '没有更多了';}}}).catch(err=>{this.error = true; }).finally(()=>{this.loading = false })
},// 上拉刷新onLoad() {this.current+=1this.createList(this.current,this.size)},
}

vant-list上拉加载onload事件触发多次相关推荐

小程序上拉加载onReachBottom不触发
1.检查配置对应的config配置文件 export default {enablePullDownRefresh: true, } 2.查看是否有重复的onReachBottom 被覆盖 3.css ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法...
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
uni-app 上拉加载函数 onReachBottom 不触发
记一次问题解决记录. 问题:uni-app 上拉加载函数不触发. 首先我已经在 pages.json 文件中配置了 enablePullDownRefresh 为 true,且配置正确. {" ...
vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载
在小程序开发中使用下拉刷新和上拉加载非常多,比如常用的展示型首页,而实现这个功能有两种形式,第一种是使用 scroll-view 组件,第二种是不使用 scroll-view 组件而让整个页面刷新,那 ...
Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
用vant框架做H5时踩过的坑 1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正 ...
h5结合vant框架，实现列表上拉加载下拉刷新
最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去.在开发过程中,使用了vant这个框架: vant文档:https://youzan.github.io/vant/#/zh ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
小程序 onReachBottom 上拉加载事件失效
微信自带的下拉刷新上拉加载需要在 .json 文件里打开 "enablePullDownRefresh": true 在 .js 文件中分别对应两个事件 /*** 页面相关事件处理 ...

vant-list上拉加载onload事件触发多次

vant-list上拉加载onload事件触发多次相关推荐

最新文章

热门文章