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