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

相关推荐
像风一样自由202011 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止1 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作