vant-vue 移动端列表下拉刷新下拉加载更多

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、HTML
• 二、JS
• 总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

html

代码如下（示例）：

        
          

            

              
              

                
{{ item.name }}
                {{ item.createTime }}
              
            
          
        
      

JS

代码如下（示例）：

loading: false,
finished: false,
refreshing: false,
DisplayList:[], 
num: 1, //默认加载页数



 methods: {
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false
      this.DisplayList = []
      this.num = 1 
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onLoad() {
      childFamilyPage({pageNo: this.num, pageSize: 10})
        .then(res => {
          for (const i in res.data.rows) {
            this.DisplayList.push(res.data.rows[i])
          }
          this.loading = false
          if (this.DisplayList.length >= res.data.totalRows) {
            this.finished = true
          }
          this.refreshing = false
          this.num += 1
        })
        .catch(err => {
          console.log(err)
        })
    },
}

---

总结

提示：本篇文章正文内容仅供参考