vant/vue实现小程序下拉刷新功能方法详解

月球大魔王

首先先把van-list控件放入列表项中 

<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<list-nav :list="list"></list-nav>
</van-list>

data(){
    return{
        list: [],
    } 
}

通过methods方法进行更新数据

onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 0; i++) {
          this.list.push(this.list.length + 1);
        }
 
        // 加载状态结束
        this.loading = false;
 
        // 数据全部加载完成
        if (this.list.length >= 6) {
          this.finished = true;
        }
      }, 1000);
    },

 

以上就是vant/vue实现下拉刷新功能方法详解的详细内容，更多关于vant/vue实现下拉刷新功能的资料请关注琼殿技术社区其它相关文章！

您可能感兴趣的文章:

• vue使用better-scroll实现下拉刷新、上拉加载
• vue插件mescroll.js实现移动端上拉加载和下拉刷新
• vueScroll实现移动端下拉刷新、上拉加载
• vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
• vue基于vant实现上拉加载下拉刷新的示例代码
• vue实现原生下拉刷新
• Vue uni-app框架实现上拉加载下拉刷新功能
• Vue vant-ui框架实现上拉加载下拉刷新功能