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.pswp.cn/diannao/35987.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/35987.shtml
英文地址,請注明出處:http://en.pswp.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;代碼 應用層需要通…

2024年軟件測試面試題大全【答案+文檔】

&#x1f345; 視頻學習&#xff1a;文末有免費的配套視頻可觀看 &#x1f345; 點擊文末小卡片&#xff0c;免費獲取軟件測試全套資料&#xff0c;資料在手&#xff0c;漲薪更快 一、面試基礎題 簡述測試流程&#xff1a; 1、閱讀相關技術文檔&#xff08;如產品PRD、UI設計…

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;正逐漸在數據防泄密領域發揮著越來越重要的…

理解和使用JavaScript的閉包

閉包 在前端開發中&#xff0c;JavaScript是一種非常重要的編程語言。它的靈活性和強大功能使得開發者可以創建豐富的用戶體驗。然而&#xff0c;JavaScript中有些概念對于初學者來說可能比較難以理解&#xff0c;閉包就是其中之一。本文將深入探討JavaScript中的閉包&#xf…

安裝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…

類的裝飾器

1 使用類定義裝飾器 class Person(object):def __init__(self):self._age 0propertydef age(self):return self._ageage.setterdef age(self,newValue):print(觸發了嗎)self._age newValuep Person() print(p.age) # 0 p.age 20 print(p.age) # 20 2 類屬性 class Pe…

JavaScript學習筆記(二)

12、數字 常規用法和java的用法相似&#xff0c;就不再做詳細的記錄, JavaScript 數字 以下只記錄特殊用法&#xff1a; 12.1 數字字符串運算 在所有數字運算中&#xff0c;JavaScript 會嘗試將字符串轉換為數字&#xff1a; var x "100"; var y "10"…

探索QCS6490目標檢測AI應用開發(一):Yolov8n模型轉換及量化

目標檢測&#xff08;Object Detection&#xff09;是計算機視覺領域的核心任務之一&#xff0c;它旨在識別圖像中的物體并確定其位置&#xff0c;在本期的文章中&#xff0c;我們用一個端到端的目標檢測AI應用為例子。介紹如何在QCS6490 Ubuntu系統上實現一個目標檢測應用開發…

第 5 章理解 ScrollView 并構建 Carousel UI

通過上一章的學習,我相信你現在應該明白如何使用堆棧構建復雜的 UI。當然,在你掌握 SwiftUI 之前,你還需要大量的練習。因此,在深入研究 ScrollView 以使視圖可滾動之前,讓我們先以一個挑戰開始本章。你的任務是創建一個類似于圖 1 所示的卡片視圖。 …

如何遷移R包

遷移R包涉及將一個或多個R包從一個系統轉移到另一個系統。以下是遷移R包的詳細步驟&#xff1a; 1. 確定要遷移的R包 首先&#xff0c;列出你在當前系統中安裝的所有R包&#xff0c;或僅列出你需要遷移的R包。你可以使用以下代碼列出所有安裝的R包&#xff1a; installed_pa…

swp添加池子addLiquidity失敗

案發現場 首次添加交易對、一直失敗、但是也沒提示具體的原因。到這一步就沒了、由下圖可知、也沒看到log、由此可見第一步就失敗了。 解決方案 一、添加 工廠KywFactory 添加如下 bytes32 public constant INIT_CODE_PAIR_HASH keccak256(abi.encodePacked(type(KywPair…

移植對話框MFC

VC版 MFC程序對話框資源移植 以下均拷貝自上面&#xff0c;僅用來記錄 &#xff08;部分有刪除&#xff09; 法1&#xff1a; Eg&#xff1a;將B工程調試好的對話框移植到A工程中 1.資源移植 1.1 在2017打開B工程,在工作區Resource標簽頁中選中Dialog文件夾下的資源文件,按…

注意!短視頻的致命誤區,云微客教你避開!

為什么你做短視頻就是干不過同行&#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…