List 组件通过loadingfinished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可。若数据已全部加载完毕,则直接将finished设置成true即可。

<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
    <van-list :finished="finished" @load="onload" v-model="loading" :offset="200">   <!--进入页面时,load会触发一次-->
        <div class="list-item" v-for="(item,index) in goodList" :key="index"
            <div class="list-item-text">
                <div>{{item.NAME}}</div>
            </div>
        </div>
    </van-list>
</van-pull-refresh>
export default {
        data() {
            return {
                loading: false,   //是否在上拉加载
                isRefresh: false,  //是否在刷新
                finished: false,   //是否还有商品
                timer: null
            }
        },
  1. 在网页实际运行的某些场景下,有些事件时会被不间断的被触发的,如resize事件,而不像是我们想象中的,滚动一次触发一次。这种情况下,由于过于频繁地DOM操作和资源加载,严重影响了网页性能,甚至会造成浏览器崩溃。
  2. 如:滚动到页面底部加载更多,稍微滚动一下就会触发n多次scroll事件,此时就可以用到节流的方法:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
methods: {
                 if(!this.timer){
                    this.timer = setTimeout(() => {
                        this.getGoods()       //请求商品数据的方法
                        this.timer = null;
                    }, 1000)
                }

        }

 

Logo

前往低代码交流专区

更多推荐