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;
      };
    },
    
相关推荐
c++之路9 分钟前
C++23概述
java·c++·c++23
brucelee1861 小时前
Claude Code 安装教程(Windows / Linux / macOS)
linux·windows·macos
专注API从业者1 小时前
Open Claw 京东商品监控选品实战:一键抓取、实时监控、高效选品
java·服务器·数据库
jsons11 小时前
给每台虚拟机设置独立控制台密码
linux·运维·服务器
摇滚侠1 小时前
DBeaver 导入数据库 导入 SQL 文件 MySQL 备份恢复
java·数据库·mysql
嵌入式×边缘AI:打怪升级日志2 小时前
全志T113 Tina-SDK 配套工具链开发应用(从Makefile到CMake再到Autotools)
linux
嵌入式×边缘AI:打怪升级日志2 小时前
全志T113嵌入式Linux开发环境搭建(VMware + Ubuntu 18.04)详细步骤
linux·ubuntu
keep one's resolveY2 小时前
SpringBoot实现重试机制的四种方案
java·spring boot·后端
天空属于哈夫克32 小时前
企业微信API常见的错误和解决方案
java·数据库·企业微信
云栖梦泽3 小时前
Linux内核与驱动:14.SPI子系统
linux·运维·服务器·c++