vant list加载 empty空状态

2023-11-09

 <van-empty image="search" description="无搜索内容" v-show="emptyShow" />
     <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
    <div
      class="list"
      v-for="(item,index) in list"
      :key="index"
      :value="item"
      @click="showComDetail(item)"
    >
      <div class="listName">{{item.name}}</div>
      <div class="listUserName">{{item.userName}}</div>
      <van-tag v-if="item.state == 1" color="#f2826a" class="listState">{{item.state | stateFilter}}</van-tag>
      <van-tag
        v-else-if="item.state == 2"
        class="listState"
        type="success"
      >{{item.state | stateFilter}}</van-tag>
      <van-tag class="listState" v-else type="primary">{{item.state | stateFilter}}</van-tag>
      <div class="listTime">{{item.createTime}}</div>
      <div class="line"></div>
    </div>
    </van-list>
data(){
return{
pageSize: 8, // 默认每次显示8条数据,还有的数据根据滚动加载
}}

// 获取所有数据
    getList(current, size, params) {
      getComList(
        Object.assign(
          {
            current: this.currentPage,
            size: this.pageSize
          },
          params
        )
      ).then(res => {
        this.list = res.data.data.records;
        if (this.list.length == 0) {//搜索时判断是否有数据,显示空状态样式
          this.emptyShow = true;
        } else {
          this.emptyShow = false;
        }
        this.total = res.data.data.total;
        this.loading = false;
        if(this.total > this.pageSize){//数据的总数大于显示页码数,页码数++,继续加载数据
          this.pageSize ++;
        }
        if (this.list.length == res.data.data.total) {//直到数据长度等于获取的数据总数,停止加载
          this.finished = true;//停止加载
        }
      });
    },

另一种加载方法

  if(response.data.data.total <= this.pageSize){
          this.list = response.data.data.records
        }else{
          let arr = response.data.data.records;
          this.list = this.list.concat(arr);
          this.currentPage++;
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= response.data.data.total) {
          this.finished = true;
        }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vant list加载 empty空状态 的相关文章

  • &和&&的区别(单与和双与的区别)

    和 都可以用作逻辑与的运算符 为短路与 不是短路与 可以作为整数的位运算符 举两个例子 1 对于if str null str equals 这个表达式 当str null 时 后面的表达式就不会执行 也不会出现NullPointerExc
  • 跨平台编程开发工具Xojo 2023 Release mac中文版功能介绍

    Xojo mac是一款跨平台的软件开发工具 它允许开发人员使用一种编程语言来创建应用程序 然后可以在多个操作系统上运行 Xojo 2023是Xojo开发工具的最新版本 它提供了许多功能和改进 以帮助开发人员更轻松地构建高质量的应用程序 Xo

随机推荐

  • 转载super resolution 超分辨率 的一些论文和代码

    1 CVPR 2019 神奇的超分辨率算法DPSR 应对图像模糊降质 code 2 从SRCNN到EDSR 总结深度学习端到端超分辨率方法发展历程 3 超分辨率在人脸识别中的工业应用 商汤算法一骑绝尘 打造公安人脸识别智能核心 4 人脸超分
  • linux开放端口命令tcp,linux开放端口命令

    linux系统中控制端口的开启与关闭可以由命令来执行 下面由学习啦小编为大家整理了linux下开放端口命令的相关知识 希望对大家有所帮助 linux开放端口命令1 打开指定端口 sbin iptables I INPUT p tcp dpo
  • 数据、常量和变量 2014-3-19总结

    今天学习了数据 常量和变量 一 数据 数据分为两种 静态数据和动态数据 1 静态数据 1 概念 静态数据是指一些永久性的数据 硬盘内存比较大 所以一般的存储在硬盘中 2 存储的时长 计算机关闭之后再开启 这些数据依旧还在 只要你不主动删掉或
  • Backtrader量化&回测11——策略信号Indicator

    对于程序来讲 该有的代码一行都不会少 但是把代码分块就可以很直观的阅读或修改代码 使用Indicator可以将策略的信号从策略类Strategy中脱离出来 方便策略进行协调与控制 文章目录 策略信号 示例代码 策略信号 官网中对于Indic
  • Pycharm 的使用技巧( 启动界面弹出Tips的内容翻译)

    Pycharm 启动界面弹出Tips的部分内容翻译 1 ctrl N 打开类的查找框 2 在拼写类的名字时可以用ctrl 空格来补充未写完的部分 活着弹出可选项 在两次点击ctrl 空格时 将在补充完类的拼写的同时自动添加导入该类的语句 3
  • 手撕boost/buck

    手撕Boost Boost公式推导及实验验证 手撕Buck Buck公式推导过程 Boost Boost的拓扑结构 在开关导通的时候 电感两端电压U Vi不变 电感量L也是常数 di dt U L 常数 电流随时间线性变化 如果我们规定电流
  • MySQL高级篇之视图

    视图 1 介绍 视图 View 是一种虚拟存在的表 视图中的数据并不在数据库中实际存在 行和列数据来自定义视图的查询中使用的表 并且是在使用视图时动态生成的 通俗的讲 视图只保存了查询的SQL逻辑 不保存查询结果 所以我们在创建视图的时候
  • IDEA创建mybatis的xml文件

    当我们用IDEA写项目写mybatis的mapper 直接去新建xml文件的时候发现没有这个选项 我们需要去创建一个xml的file模板 这样我们去新建的时候就很方便了 1 File gt Settings 2 Editor gt File
  • Opencv画图函数整理 及 cvCircle cvLine 只能画出黑白两种颜色问题 解决

    一句话 用这些画图函数在RGB图上画 则能画出来彩色 如果您在灰度图上画 则无论怎么设置color都只能画出黑白两种颜色 就这一句话搞了我一个晚上 惭愧 Opencv绘图函数 http www opencv org cn index php
  • C语言函数大全--h开头的函数

    h开头的函数或宏 1 hypot hypotf hypotl 1 1 函数说明 1 2 演示示例 1 3 运行结果 2 HUGE VAL HUGE VALF HUGE VALL 2 1 函数说明 2 2 演示示例 2 3 运行结果 3 ha
  • linux安装gitlab并修改gitlab默认端口号

    安装系统 centos 6 5 官网安装地址 https about gitlab com install centos 6 可以先根据官网安装步骤进行安装 分别执行以下命令 1 打开http访问和ssh访问 sudo yum instal
  • Premiere Pro 2022

    第1章 视频编辑的基础知识 1 1 视频编辑术语 帧 视频的基础单位 可以理解为一张静态图片就是一帧 关键帧 是素材中的特定帧 标记为进行特殊的编辑或其他操作 以便控制完成动画的流 回放或其他特性 帧速率 代表每秒播放帧的数量 单位是每秒多
  • 机器学习、计算机视觉和深度学习

    机器学习 计算机视觉和深度学习 1 什么是机器学习 2 机器学习的类型 3 什么是计算机视觉 4 计算机视觉的机器学习应用 5 总结 参考 这篇博客将简要介绍 机器学习和用于计算机视觉的机器学习 想象一下 你可以使用人脸检测算法在图像或视频
  • 为 Prometheus Node Exporter 加上认证

    这篇文章主要是为了庆祝 Node Exporter 终于迎来了 v1 0 0 版本 Prometheus https prometheus io 是最早由 SoundCloud 开源的监控告警解决方案 并已经成长为继 Kubernetes
  • W2NER详解

    论文 https arxiv org pdf 2112 10070 pdf 代码 https github com ljynlp W2NER 文章目录 W2NER 介绍 模型架构 解码 源码介绍 数据输入格式 模型代码 参考资料 W2NER
  • jvm学习笔记_简单了解jvm

    一 基本概念 JVM 是可运行 Java 代码的假想计算机 包括一套字节码指令集 一组寄存器 一个栈 一个垃圾回收 堆 和 一个存储方法域 JVM 是运行在操作系统之上的 它与硬件没有直接的交互 二 运行过程 我们都知道java源文件 通过
  • java调用天地图api获取地理信息

    目录 1 注册账号登录 2 创建应用 获取key 3 查看接口示例 4 调用接口 4 1地理编码查询 4 2逆地理编码查询 天地图网址 天地图API 1 注册账号登录 2 创建应用 获取key 3 查看接口示例 4 调用接口 4 1地理编码
  • ctfshow web入门 web14

    根据题目提示查看源代码 发现编辑器路径 在url中输入 editor得到 点击文件上传发现文件空间可能有内容 editor attached file var www html nothinghere fl000g txt 访问 fl000
  • WSL2安装图形化界面

    文章目录 安装图形化界面 安装图形化界面 由于WSL2 Ubuntu默认不安装图形化界面 所以需手动安装 apt get install xfce4 使用windows powershell 查看WSL使用的IP地址 ipconfig 进入
  • vant list加载 empty空状态