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

最新推荐文章于 2024-04-20 06:33:47 发布

周、小闹

最新推荐文章于 2024-04-20 06:33:47 发布

阅读量1k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53749423/article/details/126656899

版权

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

文章目录

一、HTML
二、JS
总结

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

一、使用步骤

html

代码如下（示例）：

<van-pull-refresh
        v-model="refreshing"
        class="flexbox-v flex-item liebiao p-b-40 bg-f7"
        style="overflow:auto;"
        @refresh="onRefresh"
      >
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="10">
          <ul style="overflow: auto;">
            <li class="lie-box" v-for="(item, index) in DisplayList" :key="index" @click="details(item)">
              <img src="../../assets/tops.jpg" alt="" />
              <div class="nei">
                <h4>{{ item.name }}</h4>
                <span>{{ item.createTime }}</span>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>

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)
        })
    },
}