vant-ui中List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新的效果

vant-ui中List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新的效果

一、直接上代码

javascript 复制代码
      sensitiveRefresh: false,
      sensitiveLoading: false,
      sensitiveFinished: false,
      sensitiveDataCount: 0,
      sensitiveList: [],
      sensitivePageNumber: 1,


  <van-pull-refresh v-model="sensitiveRefresh" @refresh="sensitiveRefreshLoadTop">
              <!-- 操作完成后将 v-model 设置为 false,表示加载完成 -->
              <van-list
                v-model="sensitiveLoading"
                :finished="sensitiveFinished"
                :finished-text="sensitiveDataCount > 0 ? '-没有更多了-' : ''"
                @load="sensitiveLoadMoreList"
              >
                <!-- 当组件滚动到底部时,会触发 load 事件并将 loading 设置成 true -->
                <!-- 若数据已全部加载完毕,则直接将 finished 设置成 true 即可。 -->
                <div class="spInfo-cell" v-for="(item, index) in this.sensitiveList" :key="index">
                  <div class="spInfo-cell-content">
                    <div class="text" style="width: 45px">{{ item.spCode }}</div>
                    <div class="text" style="width: 100px">
                      {{ item.content }}
                      <br />
                      {{ item.stockName }}
                    </div>
                    <div class="text" style="width: 120px">
                      {{ item.operatorName }}
                      <br />
                      {{ item.createTime }}
                    </div>
                    <div @click="clickDeleteSensitive(item)" class="sensitive-btn">
                      <div class="text">删除</div>
                    </div>
                  </div>
                  <div class="line"></div>
                </div>
                <van-empty v-if="sensitiveDataCount == 0" description="暂无数据" />
              </van-list>
            </van-pull-refresh>

   //不生效列表刷新
    sensitiveRefreshLoadTop() {
      this.sensitiveFinished = false;
      // 将 loading 设置为 true,表示处于加载状态
      this.sensitiveLoading = true;
      this.sensitiveLoadMoreList();
    },
    //不生效列表上拉加载更多
    sensitiveLoadMoreList() {
      if (this.sensitiveRefresh) {
        this.sensitivePageNumber = 1;
        this.sensitiveList = [];
        this.sensitiveRefresh = false;
      }
      this.getSensitiveList();
    },
    // 不生效接口列表
    getSensitiveList() {
      spRemoveSensitiveWordList({
        spCode: this.search.spCode,
        pageNumber: this.sensitivePageNumber,
        pageSize: 10,
      }).then(res => {
        this.sensitiveLoading = false;
        this.sensitiveFinished = false;

        this.sensitiveList.push(...(res.data || []));
        this.sensitiveDataCount = res.dataCount;
        this.sensitivePageNumber++;

        if (this.sensitiveList.length >= this.sensitiveDataCount) {
          this.sensitiveFinished = true;
        }
      });
      () => {
        this.sensitiveLoading = false;
      };
    },
    
相关推荐
小羊没烦恼!14 小时前
微服务化的基石——持续集成
java·大数据·word·powerpoint·.net
俊昭喜喜里14 小时前
java中的继承和多态的区别
java
小羊没烦恼!15 小时前
初探性能优化——2个月到4小时的性能提升
java·开发语言·windows·算法·c#
未济15 小时前
linux 配置环境变量
linux
傲世仙尊15 小时前
目录即文件-Ext文件系统收尾篇
linux·c语言
譕痕15 小时前
JSONObject与JSONArray封装数据格式区别
java·json
胡写代码15 小时前
别再前后端各写一套表单校验了
java·后端
小鱼能吃糖15 小时前
缺陷修复总览 · mall电商项目:5类缺陷,1个病根,4个业务域
java·电商
大蓝头15 小时前
安装包UI美化之路-nsNiuniuSkin全新UI调试与预览方法
ui·electron·安装包·截图控件·截屏控件
此时不提桶,更待何时15 小时前
01-06-A-JVM排查实战详解
java·jvm