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;
      };
    },
    
相关推荐
a123560mh2 小时前
国产信创操作系统银河麒麟常见软件适配(MongoDB、 Redis、Nginx、Tomcat)
linux·redis·nginx·mongodb·tomcat·kylin
赖small强2 小时前
【Linux驱动开发】Linux MMC子系统技术分析报告 - 第二部分:协议实现与性能优化
linux·驱动开发·mmc
guygg882 小时前
Linux服务器上安装配置GitLab
linux·运维·gitlab
百***35512 小时前
Linux(CentOS)安装 Nginx
linux·nginx·centos
leonardee3 小时前
Spring Security安全框架原理与实战
java·后端
q***5183 小时前
Spring Cloud gateway 路由规则
java
tzhou644523 小时前
Linux文本处理工具:cut、sort、uniq、tr
linux·运维·服务器
空空kkk3 小时前
SpringMVC框架——入门
java·spring
liyi_hz20083 小时前
云原生 + 国产化适配:O2OA (翱途)开发平台后端技术栈深度解析
java·后端·开源软件
⑩-3 小时前
缓存穿透,击穿,雪崩
java·redis