vant组件 顶部下拉刷新和页面底部下拉获取数据+顶部搜索框

news2024/11/18 9:45:59

1.html部分(顶部tab切换无,只有主体list部分)

    <div class="yd" >
      <!-- yd端 -->
      <!-- 搜索框 -->
      <van-search
        v-model="ydsearchvalue"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <van-button type="info" style="height: 2.5rem" @click="onSearch"
            >搜索</van-button
          >
        </template>
      </van-search>
      <!-- 列表 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="ydloading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="item in ydnoticeinfoList"
            :key="item.id"
            :title="item.cotTitle"
          />
        </van-list>
      </van-pull-refresh>
    </div>

2.js中data部分

  data() {
    return {
      //-------------yd参数
      ydloading: false,
      finished: false,
      refreshing: false,
      ydnoticeinfoList: [], // 公告信息表格数据
      ydqueryParams: {
        pageNum: 0, // 注意从0开始
        pageSize: 10,
        cotTitle: "", // 搜索的参数名
      },
      ydsearchvalue: "", // 搜索的value值
    };
  },

3.js中methods部分

methods: {
/* --------------------------移动端---------------- */
    // 搜索功能
    onSearch() {
      // console.log(this.ydsearchvalue);
      this.ydqueryParams.cotTitle = this.ydsearchvalue;
      this.finished = false; // 表示还没加载完
      this.ydloading = true; // 将 loading 设置为 true,表示处于加载状态
      this.ydqueryParams.pageNum = 0;
      this.ydnoticeinfoList = [];
      this.onLoad();  // 加载数据
    },
    // 底部下拉刷新
    onLoad() {
      if (this.refreshing) {
        this.ydqueryParams.pageNum = 0; // 获取页面的下标从0开始
        this.ydnoticeinfoList = []; // 刷新时候清空表格数据
        this.refreshing = false; 
      }
      this.ydqueryParams.pageNum += 1;
      this.getYdList(); //获取数据,页面渲染
    },
    // 顶部下拉刷新
    onRefresh() {
      console.log("刷新;;;");
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true,表示处于加载状态
      this.ydloading = true;
      this.onLoad();
    },
    // 获取数据
    getYdList() {
      // 计时器显示那个底部刷新转圈时间
      setTimeout(() => {
        listNoticeinfo(this.ydqueryParams).then((res) => {
          if (res.code == 200) {
            console.log("####", res);
            this.ydloading = false; // 这一次的加载状态结束
            // 把获取到的数据进行拼接,list长度=total时候就是所有数据加载完了
            this.ydnoticeinfoList = this.ydnoticeinfoList.concat(res.rows);
            if (this.ydnoticeinfoList.length >= res.total) {
              this.finished = true; //所有的数据已经全部加载完了
            }
          }
        });
      }, 1000);
    },
    /* --------------------------移动端---------------- */

}

注意:

1.获取数据的时候ydqueryParams中的pageNum从0开始

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1867699.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

供应链攻击是什么?

随着企业对技术和连接性的依赖日益增加&#xff0c;以及对第三方的普遍依赖&#xff0c;供应链攻击变得越来越普遍。这些攻击旨在通过供应商和商业伙伴损害企业。 供应链攻击可能对企业和组织构成重大威胁&#xff0c;因为它们可能危及它们的安全以及向客户提供的产品和服务的…

【笔记】事务隔离级别以及MVCC解决幻读

事务提交可能碰到的问题&#xff1a; &#xff08;1&#xff09;脏读&#xff1a;事务1对数据进行修改但还没提交&#xff0c;事务2读取修改后的数据&#xff0c;之后事务1执行错误&#xff0c;回滚了&#xff0c;此时事务2的数据是错误的脏数据。 &#xff08;2&#xff09;不…

Stm32的DMA的学习

一&#xff0c;介绍 二&#xff0c;DMA框图 三&#xff0c;DMA通道 四&#xff0c;相关HAL库函数 五&#xff0c;配置DMA 六&#xff0c;Stm32CubeMX配置 【13.1】减少CPU传输负载 DMA直接存储器访问—Kevin带你读《STM32Cube高效开发教程基础篇》_哔哩哔哩_bilibili

Shell (一)Ubuntu的网络配置及软件安装

Ubuntu的配置及软件安装 网络配置 虚拟机提供的网络类型 桥接模式 主机和虚拟机分别拥有不同的ip地址&#xff0c;可以实现和外界设备通信 NAT模式 也可以联网&#xff0c;但是和主机共用同一个ip地址&#xff0c;外界无法识别虚拟机和主机发送的信息 仅主机模式 虚拟机不可…

Python学习笔记23:进阶篇(十二)常见标准库使用之日期时间功能datetime模块的学习使用

前言 本文是根据python官方教程中标准库模块的介绍&#xff0c;自己查询资料并整理&#xff0c;编写代码示例做出的学习笔记。 根据模块知识&#xff0c;一次讲解单个或者多个模块的内容。 教程链接&#xff1a;https://docs.python.org/zh-cn/3/tutorial/index.html 日期和时…

什么可以申请商标:企业和个人申请注册商标攻略!

常见的商标类型有汉字、 拼音或英文、有图形&#xff0c;还有把各种元素混合在一起的&#xff0c;还有声音商标和立体商标等&#xff0c;不过对普通企业相对来说很少用到&#xff0c;普推商标知产老杨看到的是&#xff0c;中小企业使用文字商标的比较居多&#xff0c;识别区分相…

thinksboard新建菜单

1.打开目录\thingsboard\ui-ngx\src\app\modules\home\pages新增npages文件夹 2.新增npages.module.ts以及npages-routing.module.ts控制文件&#xff0c;以及页面展示文件npages.component.html,npages.component.scss,npages.component.ts 3.打开npages.component.ts文件&…

机器人自主学习方法学习

各类算法的优缺点 原理&#xff1a; 该结构中初始的知识为0&#xff0c;不存在任何先验知识&#xff0c;让机器人与环境交互不断获得经验&#xff0c;是一个增量学习的过程。 算法举例 基于强化学习的开源算法及工具 OpenAI Gym&#xff1a;用于开发和比较强化学习算法的工具…

山水风景视频素材去哪里下?去哪里找?山水风景下载网站分享

在这个数字时代&#xff0c;视频已经成为最直观、有效的传达情感和分享故事的工具。对于那些渴望通过视频传递视觉美感和情感共鸣的创作者来说&#xff0c;拥有高质量的山水风景视频素材是关键。互联网虽然是一个信息量庞大的平台&#xff0c;但找到令人赞叹的山水风景视频素材…

上下文管理器在Python中的妙用

更多Python学习内容&#xff1a;ipengtao.com Python上下文管理器是一个非常强大的工具&#xff0c;它能够帮助开发者在特定代码块前后自动执行特定的操作&#xff0c;常用于资源管理&#xff0c;如文件操作、数据库连接和锁定等。本文将详细介绍Python上下文管理器的概念、使用…

Arduino - MG996R

Arduino - MG996R In this tutorial, we are going to learn how to use the MG996R high-torque servo motor with Arduino. 在本教程中&#xff0c;我们将学习如何将MG996R高扭矩伺服电机与Arduino一起使用。 Hardware Required 所需硬件 1Arduino UNO or Genuino UNO Ard…

Python终于可以在线编程了!

优势 在线编程&#xff0c;轻量级&#xff0c;无需安装Python环境。 在线编程优势&#xff1a; 无需安装和配置环境: 在线编程平台不需要用户在本地安装任何软件或配置开发环境。这对初学者和那些希望快速上手进行编程的人非常有利。跨平台兼容性: 这些平台可以在任何具有互联网…

java将html转成图片

java 将html转成图片 1.导入jar2.代码3.展示结果4.注意事项 最近有一个需求需要根据指定的样式生成图片&#xff0c;使用java原生技术有些麻烦&#xff0c;所以上网搜了下案例&#xff0c;最后发现最好用的还是html2image&#xff0c;这里进行简单总结下。 1.导入jar <!-- 用…

软件开发方法

软件开发方法 瀑布方法优势 敏捷法优势敏捷软件开发原则 激进&#xff08;Scrum&#xff09;优势 极限编程优势 精益优势 看板优势 迭代增量模型 创建软件并不是一件简单的事情&#xff1a;通常&#xff0c;开发应用程序需要不同技能的团队协同努力。如果没有战略管理&#xff…

一个去掉PDF背景水印的思路

起因 昨天测试 使用“https://github.com/VikParuchuri/marker” 将 pdf 转 Markdown的过程中&#xff0c;发现转换后的文件中会保护一些背景图片&#xff0c;是转换过程中&#xff0c;程序把背景图识别为了内容。于是想着怎么把背景图片去掉。 背景水印图片的特征 我这里拿…

2024软件设计师笔记之考点版(一考就过):26-39

软件设计师之一考就过:成绩版 考点26:类、封装、继承、多态 真题1:在面向对象方法中,两个及以上的类作为一个类的超类时,称为(多重继承),使用它可能造成子类中存在(二义性)的成员。 真题2:在面向对象方法中,多态指的是(客户类无需知道所调用方法的特定子类的实现…

SwiftUI 6.0(iOS/iPadOS 18)中全新的 Tab 以及 Sidebar+悬浮 TabView 样式

概览 看来苹果一直对 iPadOS 中标签栏&#xff08;TabView&#xff09;不甚满意。这不&#xff0c;在 WWDC 2024 中苹果又对 TabView 外观做了大幅度的进化。 现在我们可以在顶部悬浮条和左侧的 Sidebar 两种不同布局之间恣意切换 TabView 的外观啦。而且&#xff0c;这在 Swi…

ubuntu 18 虚拟机安装(3)安装mysql

ubuntu 18 虚拟机安装&#xff08;3&#xff09;安装mysql 参考 https://cloud.tencent.com/developer/article/1700780 技术分享 | MySQL 设置管理员密码无法生效一例 https://cloud.tencent.com/developer/article/2014384 在Ubuntu18.04上安装MySQL &#xff5c; 超级详细…

字节豆包 MarsCode:AI 开发工具

MarsCode 是豆包旗下的智能编程助手&#xff0c;类似 GitHub Copilot 提供以智能代码补全为代表的核心能力&#xff0c;简单试用了下&#xff0c;免费&#xff0c;使用时需要手机号登录&#xff0c;代码补全还算 ok&#xff0c;聊天功能就有点差了。 还包括一个 AI 原生 IDE&am…

EPLAN批量修改文字大小

在项目设计过程中&#xff0c;往往要批量调整文字的大小&#xff0c;如何批量修改文字大小&#xff1a; 点击需要调整的相同类的文字 右键 “属性”&#xff0c;然后在分配里找到“属性放置&#xff0c;设备标识符”这一栏 看下文字的属性在第几层 在项目数据找到层管理&…