1.html部分(顶部tab切换无,只有主体list部分)
html
<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部分
javascript
data() {
return {
//-------------yd参数
ydloading: false,
finished: false,
refreshing: false,
ydnoticeinfoList: [], // 公告信息表格数据
ydqueryParams: {
pageNum: 0, // 注意从0开始
pageSize: 10,
cotTitle: "", // 搜索的参数名
},
ydsearchvalue: "", // 搜索的value值
};
},
3.js中methods部分
javascript
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开始