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

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

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

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