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;
      };
    },
    
相关推荐
马优晨4 分钟前
Java中的dto是什么
java·开发语言·java中的dto是什么·java的dto是什么·dto在java中是什么
小蒜学长8 分钟前
基于Springboot+Vue的高校教师教学业绩综合管理系统的设计与开发(代码+数据库+LW)
java·数据库·spring boot·后端·教学业绩管理·三级权限
Mikko710 分钟前
Spring Boot 3.5.16 自带的 Tomcat 10.1.55 中了哪些 CVE?其中一条是修上一个漏洞时带进来的
java·spring boot·后端·安全·tomcat
十年Java程序媛14 分钟前
Java 内部类全解|成员 / 静态 / 匿名内部类,理清和 Lambda 的区别
java·spring boot·面试
瑞克-桑切斯18 分钟前
13、DNS、DHCP 与 FTP 协议详解
linux·运维·云计算
程序员-Benothing22 分钟前
Linux性能分析方法论:USE、RED、火焰图与perf实战
linux·运维·服务器
SL_staff27 分钟前
报工≠打卡:从任务报工到闭环管控的5个数据断点排查清单
java·spring boot·全栈
tryxr30 分钟前
如何优化sql
java·数据库·sql·数据库优化
云中双月34 分钟前
瑞芯微rv1106进入Loader模式转储emmc数据
linux·嵌入式·uboot·u-boot·emmc·rockchip·烧录·rv1106·瑞芯微
yunwei3734 分钟前
eBPF 入门实践教程:BPF Token,安全的委托式权限与程序加载
linux·后端·性能优化