vant2.0 列表上拉下拉加载（普通 or 带搜索条件）

vant2.0 列表上拉下拉加载（普通）

 

<!--
 * @Description: 首页
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2021-08-21 20:22:30
 * @LastEditors: lhl
 * @LastEditTime: 2021-08-22 15:20:36
-->
<template>
  <div class="home-box">
    <div class="top-box">
      sss
    </div>
    <div :style="{ height: divH }" class="scorll-wrap">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          loading-text="loading...."
          :immediate-check="false"
          @load="onLoad"
          :offset="offset"
        >
          <template v-for="(item, index) in list">
            <div class="list-box" :key="index">
              <div class="item">
                <div class="left">
                  <p>{{ item.content }}</p>
                  <p>{{ item.meetingType }}</p>
                </div>
                <div class="right">
                  <p>{{ item.name }}</p>
                  <p>{{ item.openTime }}</p>
                </div>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getMeetList } from "@/api";
export default {
  data() {
    return {
      divH: "500px",
      list: [],
      loading: true,
      finished: false, // 是否已加载完成，加载完成后不再触发load事件
      refreshing: false,
      totol: 0, // 总条数
      pageCount: 0, // 总页数
      offset: 10, // 滚动条与底部距离小于 offset 时触发load事件
      pageData: {
        pageNo: 0,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getMeetList();
  },
  mounted() {
    let h =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight; //浏览器高度
    this.divH = h - 46 - 37.5 - 50 + "px";
  },
  methods: {
    onLoad() {
      this.pageData.pageNo++;
      this.getMeetList();
    },
    // 刷新
    onRefresh() {
      this.list = []; // 清空数据
      this.pageData.pageNo = 0; // 重置页码
      this.finished = false;
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getMeetList();
    },
    getMeetList() {
      getMeetList(this.pageData).then((res) => {
        const resData = res.data.returnData;
        const pageList = resData.data;
        this.total = resData.recordCount; // 总条数
        this.loading = false;
        this.refreshing = false;

        if (pageList == null || pageList.length === 0) {
          // 加载结束
          this.finished = true;
          return;
        }

        // 将新数据与老数据进行合并
        this.list = this.list.concat(pageList);

        //如果列表数据条数>=总条数，不再触发滚动加载
        if (this.list.length >= this.total) {
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less">
.scorll-wrap {
  overflow: scroll;
}
.home-box {
  .top-box {
    height: 100px;
    line-height: 100px;
    background: #ccc;
  }
  .list-box {
    padding: 0 20px;
    .item {
      background: #f5f5f5;
      margin: 30px 0;
      display: flex;
      justify-content: space-between;
      border-radius: 10px;
      padding: 20px;
      font-size: 36px;
    }
  }
}
</style>

 

 

 

 vant2.0 列表上拉下拉加载（带搜索条件的）

<template>
  <div class="list-wrap">
    <!-- scroll-list 高度的话两个方案一个是计算动态高度 一个是flex布局 -->
      <div class="scroll-list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :loading-text="$t('loadingtxt') || 'Loading...'"
            :finished-text="finished && noMore ? $t('nodatatxt') || 'No More...' : ''"
            :offset="pageSize"
            @load="onLoad"
          >
            <div
              v-for="item in list"
              :key="item.id"
              class="item-box"
            >
              <div class="left-box">
                <p class="left-top-text">
                  {{ item.id }}
                </p>
                <p class="left-bottom-text pdt8">
                  {{ item.cardNumber }}
                </p>
              </div>
            </div>
            <!-- 没有数据时候展示 -->
            <div
              v-if="!loading && !list.length"
              class="no-data-box"
            >
              <img src="~/assets/images/content/nodata.png"/>
              <p class="no-data-text">
                No Data
              </p>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
  </div>
</template>
<script>
import API from 'API'
export default {
  name: 'scorll',
  data () {
    return {
      // 上拉下拉列表相关
      loading: false, // 一开始 loading
      finished: false, // 是否已加载完成，加载完成后不再触发load事件
      refreshing: false,
      // 数据源
      list: [],
      // 当前页
      pageNumber: 1,
      // 一页有多少条
      pageSize: 20, // 滚动条与底部距离小于 offset 时触发load事件
      noMore: true // 是否显示 no more / no data
    }
  },
  methods: {
    // 上拉加载
    onLoad () {
      const data = {
        k2ID: 'XXX',
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      API.getList(data)
        .then((res) => {
          // 刷新状态
          if (this.refreshing) {
            this.list = []
            this.refreshing = false
          }

          // 成功
          const { success, dataObj, message } = res

          if (success && dataObj && dataObj.list) {
            const { list, total } = dataObj

            // 是否显示 no more / no data
            if (this.pageNumber === 1 && list.length === 0) {
              this.noMore = false
            } else {
              this.noMore = true
            }

            // 数据处理
            const newList = list.map((item) => {
              return {
                ...item,
                cardNumber: `*** **** **** ${item.cardNumber}`
              }
            })

            // 合并数据
            this.list = [...this.list, ...newList]

            this.pageNumber++ // 分页追加
            this.loading = false // 加载状态结束

            // 判断是否还有下一页
            if (list.length < this.pageSize || total / this.pageSize <= this.pageNumber) {
              this.finished = true
            }
          } else {
            // 失败
            message && this.$toast(message)
            this.loadError()
          }
        })
        .catch((e) => {
          this.$toast(e.message)
          this.loadError()
        })
    },

    // 列表加载 error
    loadError () {
      this.loading = false // 加载状态结束
      if (this.pageNumber === 1) {
        // 不影响后面继续加载，只有第一页加载抱错的时候直接结束
        this.finished = true // 加载状态结束
      }
      // 是否显示no more / no data
      if (this.pageNumber === 1 && this.list.length === 0) {
        this.noMore = false
      } else {
        this.noMore = true
      }
      // 刷新状态, 这里list不做清空处理
      this.refreshing = false
    },

    // 下拉刷新
    onRefresh () {
      // 清空列表数据
      this.pageNumber = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 查询回调
    handleSearch () {
      this.list = []
      this.pageNumber = 1
      this.onRefresh()
    }
  }
}
</script>

<style lang="less" scoped></style>