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

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

    <div class="yd" ><!-- yd端 --><!-- 搜索框 --><van-searchv-model="ydsearchvalue"show-actionplaceholder="请输入搜索关键词"@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-listv-model="ydloading":finished="finished"finished-text="没有更多了"@load="onLoad"><van-cellv-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.mzph.cn/diannao/35987.shtml

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

相关文章

JavaEE之HTTP协议(1)_HTTP基础知识,HTTP 请求、响应格式,方法,状态码

一、HTTP协议 1.1 基本概念: HTTP全称超文本传输协议&#xff0c;是一种无状态的、应用层的协议&#xff0c;它基于请求/响应模型。客户端&#xff08;通常是Web浏览器&#xff09;通过发送HTTP请求到服务器来获取或发送信息&#xff0c;服务器则返回HTTP响应作为回应。HTTP协…

shell (三)shell脚本

SHELL脚本 编程语言的分类 解释型语言&#xff1a;shell&#xff0c;Python&#xff0c;需要解析器 编译型语言&#xff1a;C语言&#xff0c;C&#xff0c;需要编译器 shell脚本 操作系统的结构 shell&#xff08;贝壳&#xff09; 应用层 app&#xff0c;代码 应用层需要通…

1、线性回归模型

1、主要解决问题类型 1.1 预测分析(Prediction) 线性回归可以用来预测一个变量(通常称为因变量或响应变量)的值,基于一个或多个输入变量(自变量或预测变量)。例如,根据房屋的面积、位置等因素预测房价。 1.2 异常检测(Outlier Detection) 线性回归可以帮助识别数…

鸿蒙开发系统基础能力:【@ohos.systemTime (设置系统时间)】

设置系统时间 本模块用来设置、获取当前系统时间&#xff0c;设置、获取当前系统日期和设置、获取当前系统时区。 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import systemTime …

沙盒在数据防泄密领域意义

在信息化快速发展的今天&#xff0c;数据已成为企业最宝贵的资产之一。然而&#xff0c;数据泄密事件频发&#xff0c;给企业的安全和发展带来了巨大威胁。SDC沙盒防泄密系统&#xff0c;作为一种创新的数据防泄密解决方案&#xff0c;正逐渐在数据防泄密领域发挥着越来越重要的…

安装zabbix时报错Could not resolve host: mirrors.huaweicloud.com;Unknown error解决办法

目录 1、问题原因 2、解决办法 3、知识拓展 DNS的区别 DNS配置文件解析 域名解析过程 4、书籍推荐 当安装Zabbix server&#xff0c;Web前端&#xff0c;agent时出现&#xff1a; [rootsc-zabbix-server ~]# yum install zabbix-server-mysql zabbix-agent安装过程中会出…

Python3极简教程(一小时学完)上

开始 Python 之旅 本教程基于 Python for you and me 教程翻译制作&#xff0c;其中参考了 Python tutorial 和 _The Python Standard Library_&#xff0c;并对原教程的内容进行了改进与补充。 相关链接地址如下&#xff1a; _Python tutorial_&#xff1a;Python 入门指南…

数字孪生流域:定义、组成等

数字孪生流域&#xff1a;定义、组成等 1 数字孪生流域&#xff08;Digital Twin Basin/Watershed&#xff09;总则1.1 定义1.2 适用范围1.3 建设目标1.4 建设原则 2 数字孪生流域框架与组成2.1 数字孪生流域框架2.2 数字孪生流域组成2.2.1 数字孪生平台2.2.2 信息化基础设施 3…

JavaScript学习笔记(二)

12、数字 常规用法和java的用法相似&#xff0c;就不再做详细的记录, JavaScript 数字 以下只记录特殊用法&#xff1a; 12.1 数字字符串运算 在所有数字运算中&#xff0c;JavaScript 会尝试将字符串转换为数字&#xff1a; var x "100"; var y "10"…

第 5 章理解 ScrollView 并构建 Carousel UI

通过上一章的学习,我相信你现在应该明白如何使用堆栈构建复杂的 UI。当然,在你掌握 SwiftUI 之前,你还需要大量的练习。因此,在深入研究 ScrollView 以使视图可滚动之前,让我们先以一个挑战开始本章。你的任务是创建一个类似于图 1 所示的卡片视图。 …

swp添加池子addLiquidity失败

案发现场 首次添加交易对、一直失败、但是也没提示具体的原因。到这一步就没了、由下图可知、也没看到log、由此可见第一步就失败了。 解决方案 一、添加 工厂KywFactory 添加如下 bytes32 public constant INIT_CODE_PAIR_HASH keccak256(abi.encodePacked(type(KywPair…

注意!短视频的致命误区,云微客教你避开!

为什么你做短视频就是干不过同行&#xff1f;因为你总想着拍剧情、段子这些娱乐视频&#xff0c;还想着当网红做IP人设&#xff0c;但是这些内容跟你的盈利没有半毛钱关系&#xff0c;况且难度大、见效慢&#xff0c;还不是精准客户。 以上这些就代表你走进了短视频的误区&…

C++初学者指南-2.输入和输出---流输入和输出

C初学者指南-2.输入和输出—流输入和输出 文章目录 C初学者指南-2.输入和输出---流输入和输出1.定制输入/输出1.1 示例&#xff1a;点坐标输入/输出1.2 流操作符1.3&#xff08;一部分&#xff09;标准库流类型 2. 工具2.1 用getline读取行 2.2 用ignore进行跳转2.3 格式化操作…

【论文阅读】-- Temporal Summary Images:通过交互式注释生成和放置实现叙事可视化的方法

Temporal Summary Images: An Approach to Narrative Visualization via Interactive Annotation Generation and Placement 摘要1 引言2 背景及相关工作2.1 叙事可视化和讲故事2.2 显示面向时间的数据2.3 小倍数和漫画2.4 注释可视化 3 设计要求和工作流程3.1 工作流程3.2 TSI…

基线核查--渗透

基线检查 基线核查概念 it中定义&#xff1a; 基线为初始的标准&#xff0c;以后更改就要经过授权&#xff0c;形成下一基线。 软件配置管理的基线&#xff1a;1功能基线&#xff0c;分配基线&#xff0c;产品基线 安全配置基线--基线核查 安全基线可以说是木桶理论&…

【python】eval函数

1.eval函数的语法及用法 &#xff08;1&#xff09;语法&#xff1a;eval(expression) 参数说明&#xff1a; expression&#xff1a;必须为字符串表达式&#xff0c;可为算法&#xff0c;也可为input函数等。 说明&#xff1a;表达式必需是字符串&#xff0c;否则会报错&a…

Vue3-尚硅谷笔记

1. Vue3简介 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;n 经历了&#xff1a;4800次提交、40个RFC、600次PR、300贡献者 官方发版地址&#xff1a;Release v3.0.0 One Piece vuejs/core 截止2023年10月&#xff0c;最…

Dubbo运行原理

目录 Dubbo通讯协议 Dubbo负载均衡策略 RPC和HTTP有什么区别&#xff1f; 让你设计一个RPC框架&#xff0c;如何考虑数据序列化问题&#xff1f; Dubbo 是一款高性能、轻量级的开源 RPC&#xff08;远程过程调用&#xff09;框架&#xff0c;主要用于构建分布式服务和微服务…

springcloud第4季 springcloud-alibaba之openfegin+sentinel整合案例

一 介绍说明 1.1 说明 1.1.1 消费者8081 1.1.2 openfegin接口 1.1.3 提供者9091 9091微服务满足&#xff1a; 1 openfegin 配置fallback逻辑&#xff0c;作为统一fallback服务降级处理。 2.sentinel访问触发了自定义的限流配置&#xff0c;在注解sentinelResource里面配置…

基于SpringBoot的学生综合测评系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot框架 工具&#xff1a;MyEclipse、Tomcat 系统展示 首页 系统首页&#xff0c;提供综合…