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

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开始

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【ARM】Ulink不同的系列对于芯片的支持和可以支持keil软件

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 了解不同版本的ULINK可以支持的芯片架构&#xff0c;和ULINK可以和哪个系列的keil软件进行在线调试 2、 问题场景 用于了解不同ULINK仿真器对于芯片的支持是不一样的&#xff0c;并不是ULINK可以支持所有的keil软件…

qmt量化交易策略小白学习笔记第44期【qmt编程之期货行情数据】

qmt编程之获取期货行情数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 获取行情数据 提示 使用该接口时&#xff0c;需要先订阅实时行情(subscribe_quote)或下载过历史行情(download_hi…

贪心算法——加工木棍(C++)

上大学&#xff0c;一天是一天&#xff0c;两天也是一天。 ——2024年6月27日 之前考试周断更了&#xff0c;今天重新开始&#xff01; 题目描述 有n根木棍&#xff0c;已知每根木棍的长度和重量。这些木棍在木工机器上加工&#xff0c;机器准备加工木棍需要一些时间&#xf…

YOLOv8数据集标注

1 简介 数据集是必不可少的部分&#xff0c;数据集的优劣直接影响训练效果。一般来说&#xff0c;一个完整的数据集应该包括训练集、测试集和验证集。通常&#xff0c;数据集会被划分为训练集和测试集&#xff0c;比如将数据集的70%用作训练集&#xff0c;30%用作测试集。在进行…

深度学习在蛋白质结构预测的新突破:AlphaFold、RoseTTAFold与ESMFold

在蛋白质结构预测和功能预测领域&#xff0c;基于机器学习的方法最近取得了显著的进展。特别是深度学习技术在这个领域中展现出了强大的能力&#xff0c;代表性的技术有 DeepMind 的 AlphaFold 和 RoseTTAFold。这些技术利用了大量的生物数据和先进的神经网络架构&#xff0c;极…

【科学计算与可视化】3. Matplotlib 绘图基础

安装 pip install matplotlib 官方文档 https://matplotlib.org/stable/api/pyplot_summary.html 主要介绍一些图片绘制的简要使用&#xff0c;更加详细和进阶需要可参考 以上官方文档。 1 绘制基础 方法名说明title()设置图表的名称xlabel()设置 x 轴名称ylabel()设置 y 轴…

在vscode 中ssh连接虚拟ubuntu,不能使用code打开文件

这是参考别人的文章&#xff1a;https://blog.csdn.net/weixin_44465434/article/details/130035032找到vscode的版本信息&#xff0c;提交后面是需要的打开home/(用户)/.bashrc&#xff0c;添加环境变量 export PATH"~/.vscode-server/bin/5437499feb04f7a586f677b155b03…

6.22套题

B. Dark 题意&#xff1a;每次能在数列中能使相邻两个数-1&#xff0c;求当数列没有连续非0值的最小贡献 解法:设表示前i个数中前i-1个数是否为0&#xff0c;当前数是j的最小贡献。表示i1以后减掉d的最小贡献。 C. 幸运值 D. 凤凰院真凶

Docker 日志

日志记录是任何生产应用程序中至关重要的一部分。当出现问题时&#xff0c;日志可以是恢复服务的关键工具&#xff0c;所以它们需要做好。在 Linux 系统上&#xff0c;我们期望通过一些常见方式与应用程序日志交互&#xff0c;有些方式更好。如果您在一台计算机上运行应用程序进…

文华财经盘立方均线-支撑压力自动画线多空声音预警指标公式源码

文华财经盘立方多空均线-支撑压力自动画线指标公式源码&#xff1a; //MA5:MA(C,5); //MA10:MA(C,10); MA20:MA(C,20),COLORRED; MA60:MA(C,60),COLORGREEN; TY:CLOSE; HD:FILTER(BACKSET(FILTER(REF(TY,10)HHV(TY,2*101),10),101),10); LD:FILTER(BACKSET(FILTER(REF(T…

openlayer 图层绘制成多种颜色的一个图层

技术栈&#xff1a; 因为是旧项目的优化功能&#xff0c;这里主要介绍实现思路。技术栈&#xff1a;openlayer 6.5^、jquery、layui组件。 背景&#xff1a; 在创建一个地图对象后&#xff0c;如何创建此处省略。这里主要讲解如何根据接口的数据来把水深测量时间的图层根据不同…

vue2的待办事项案例

头部组件 <template><div class"todo-header"><input type"text" placeholder"请输入你的任务名称&#xff0c;按回车键确认" keyup.enter"add"/></div> </template><script>import {nanoid} fro…

智能语音抽油烟机:置入WTK6900L离线语音识别芯片 掌控厨房新风尚

一、抽油烟机语音识别芯片开发背景 在繁忙的现代生活中&#xff0c;人们对于家居生活的便捷性和舒适性要求越来越高。传统的抽油烟机操作方式往往需要用户手动调节风速、开关等功能&#xff0c;不仅操作繁琐&#xff0c;而且在烹饪过程中容易分散注意力&#xff0c;增加安全隐…

【5G射频基本架构】

平台框架 平台演进及搭配 5G NR频谱 NSA/SA/ENDC

Java登录管理功能的自我理解(尚庭公寓)

登录管理 背景知识 1. 认证方案概述 有两种常见的认证方案&#xff0c;分别是基于Session的认证和基于Token的认证&#xff0c;下面逐一进行介绍 基于Session 基于Session的认证流程如下图所示 该方案的特点 登录用户信息保存在服务端内存&#xff08;Session对象&#xff…

安全技术和防火墙(iptables)

安全技术 入侵检测系统&#xff1a;特点是不阻断网络访问&#xff0c;主要是提供报警和事后监督&#xff0c;不主动介入&#xff0c;类似于监控。 入侵防御系统&#xff1a;透明模式工作&#xff0c;对数据包&#xff0c;网络监控&#xff0c;服务攻击&#xff0c;木马&#…

【数据结构】(C语言):栈

栈&#xff1a; 线性的集合。后进先出&#xff08;LIFO&#xff0c;last in first out&#xff09;。两个指针&#xff1a;指向栈顶和栈底。栈顶指向最后进入且第一个出去的元素。栈底指向第一个进入且最后一个出去的元素。两个操作&#xff1a;入栈&#xff08;往栈尾添加元素…

力扣最新详解5道题:两数之和三数之和四数之和

目录 一、查找总价格为目标值的两个商品 题目 题解 方法一&#xff1a;暴力枚举 方法二&#xff1a;对撞指针 二、两数之和 题目 题解 方法一&#xff1a;暴力枚举 方法二&#xff1a;哈希表法 三、三数之和 题目 题解 方法一&#xff1a;排序暴力枚举set去重 …

C++ | Leetcode C++题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; class Solution { private:void dfs(vector<vector<char>>& grid, int r, int c) {int nr grid.size();int nc grid[0].size();grid[r][c] 0;if (r - 1 > 0 && grid[r-1][c] 1) dfs(grid, r - 1, c);if (r …

智能革新:AI写作工具如何重塑论文生成的艺术

在学术探索的征途中&#xff0c;AI论文工具本应是助力前行的风帆&#xff0c;而非让人陷入困境的漩涡。我完全理解大家在面对论文压力的同时&#xff0c;遭遇不靠谱AI工具的沮丧与无奈。毕竟&#xff0c;时间可以被浪费&#xff0c;但金钱和信任却不可轻弃。 作为一名资深的AI…