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

相关推荐
吕彬-前端3 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱6 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai15 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨16 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓1 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端