• 记一次关于vantUI 下拉列表list加载数据的问题


    因为是第一次用vantUI所以很多地方还不是很熟,这个vant-list列表加载数据又需要在很多地方用到,这里记一下正确的用法。。

    这里先说一下会遇到的问题。

    1. 会无限请求接口
    2. 列表不会滚动始终只展示第一页的数据

    贴组件代码

    <template>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          :offset="10"
          finished-text="没有更多了"
        >
          <van-cell v-for="item in articlesList" :title="item.name_display">
            <template #label>
              <van-image :src="timesrc" />
              <span class="article-box-time">{{ item.name_display }}</span>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </template>

    这里就不作过多解释,官方文档对每个属性都有解释,这里我强调一下loading表示是否加载,finished表示是否加载完所有数据(一直请求接口的问题可能存在这里)

    JS

    data() {
        return {
          loading: false, //加载状态
          finished: false, //加载完成
          refreshing: false,
          query: {
            currentPage: 1,
            pageSize: 10,
          },
          articlesList: [],
        }
      },

    这里有个问题,当loading设置为false时,首次加载的时候会触发2次请求,但是设置为true后,页面又无法向下滚动,这里暂时记一下这个问题。。

    重点说一下加载代码

    首先在methods中获取列表数据的方法

    getList() {
          getArticlesList({
            limit: this.query.pageSize,
            page: this.query.currentPage - 1,
            title: this.title,
          })
            .then((msg) => {
              const rows = msg.list;
              if (
                rows === null ||
                rows.length === 0 ||
                this.query.pageSize * this.query.currentPage > msg.meta.total
              ) {
                this.finished = true;
              }
              this.articlesList = this.articlesList.concat(rows);
            })
            .finally(() => {
              this.refreshing = false;
              this.loading = false;
            });
        },

    这个getArticlesList是我请求后台的方法,也就是axios或ajax请求数据,title是筛选条件可以忽略。

    mag.meta.total是后台返回的总条数。

    这里就是说当当前页数 x 每页的总数 > 总记录数 就表示所有数据已经加载完成就可以设置finished为true(之前一直通过其他形式来判断的有问题,目前这种是最好的方法)

    然后无论是否请求成功都需要将loading设置为false

    然后onLoad中需要去加载这个方法,因为列表会向下滚动,所以注意这里要将页数+1,也就是this.qurey.currentPage ++

    onLoad() {
      this.query.currentPage++;
      this.getList();
    },

    然后在created中请求的是getList()而不是请求onLoad()方法,这里也要记一下。。

    created() {
      this.getList()  
    }

    最后向下拉刷新的方法

    //下拉刷新
    onRefresh() {
      this.finished = false
      this.query.currentPage = 1
      this.getList()
    },
  • 相关阅读:
    河北省重大技术需求征集系统(10)
    河北省重大技术需求征集系统(9)
    大三上学期周总结
    河北省重大技术需求征集系统(8)
    《代码大全》阅读笔记(三)
    河北省重大技术需求征集系统(7)
    河北省重大技术需求征集系统(6)
    河北省重大技术需求征集系统(5)
    【自动化】Aritest+python实现客户端UI自动化
    【自动化】Monkey自动化测试实现总结
  • 原文地址:https://www.cnblogs.com/pipim/p/15029893.html
Copyright © 2020-2023  润新知