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;
      };
    },
    
相关推荐
mldong23 分钟前
用 DDD 设计工作流引擎:聚合根与充血模型
java·架构
三言老师29 分钟前
秘诀-如何远程SSN访问家里的八台电脑(frp 实操方案)
linux·运维·ssh
mqiqe1 小时前
AgentScope Java Harness:4. 双层记忆系统 让 Agent 拥有真正的“长期大脑“
java·开发语言
伍一511 小时前
03-文件管理模块-一个看似简单的模块藏着多少细节
java·ruoyi·若依
gugucoding2 小时前
46. 【Java】JUC并发工具:让并发更简单
java·开发语言
举手2 小时前
Dispatcher模块剖析
linux·c++
Nebula_g2 小时前
JavaSE基础语法:面向对象高级(代码中的成分)
java·开发语言·编程·javase·技术栈·高级语法
AC赳赳老秦3 小时前
公开图片 OCR 数据提取:OpenClaw 合规采集公开信息图,识别文字与表格并转化为结构化数据
java·大数据·前端·数据库·python·php·openclaw
allforgood3 小时前
运行容器
linux
Light_It4 小时前
Linux 内核参数 pci-stub.ids=
linux·kernel