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