vant上拉加载、下拉刷新

<!--
 * @Descripttion: 上拉加载、下拉刷新 参考：https://youzan.github.io/vant/#/zh-CN/list
 * @version:
 * @Author: peri.lu
 * @Date: 2021-06-01
 * @LastEditors: peri.lu
 * @LastEditTime: 2021-06-01
-->
<template>
  <div class="shop-list-all">
    <van-pull-refresh
      :success-text="pageText.successText"
      :pulling-text="pageText.pulling"
      :loading-text="pageText.loadingText"
      :loosing-text="pageText.loosing"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :loading-text="pageText.loadingText"
        :finished-text="pageText.end"
        @load="onLoad"
        :offset="offset"
      >
        <div class="list-wrap">
          <div class="item" v-for="(item, index) in shopList" :key="index">
            内容
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shopTotal: 0, // 列表总数
      pageNo: 1, // 页码
      pageSize: 10, // 一页10个
      shopList: [], // 列表
      loading: false, // 是否加载中
      finished: false, // 数据是否加载完整
      refreshing: false, // 下拉刷新
      offset: 15, // 滚动条与底部距离小于 offset 时触发load事件
    };
  },
  computed: {
    // 不同类型语言切换
    pageText() {
      return this.$store.state.pageText;
    },
  },
  methods: {
    getShopList() {
      // 外层延迟主要是让用户明显感受到上拉加载的动作
      setTimeout(() => {
        // 异步请求，可以替换
        this.$bdHttpRequest(URL.GET_SHOP_LIST, {
          pageNo: this.pageNo++,
          pageSize: this.pageSize,
        })
          .then((res) => {
            if (res.code === 200) {
              // 下拉刷新时清空数据,当我们做下拉这个动作时，vant会把refreshing变成true
              if (this.refreshing) {
                this.shopList = [];
                this.refreshing = false;
              }
              this.shopTotal = res.data.shopCount;
              this.shopList = this.shopList.concat(res.data.shopList);
              // 当加载完所有数据时结束
              if (this.shopList.length >= this.shopTotal) {
                this.finished = true;
                return;
              }
              this.loading = false;
            }
          })
          .finally(() => {});
      }, 200);
    },
    onLoad() {
      this.getShopList();
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.pageNo = 1;
      this.loading = true;
      this.getShopList();
    },
  },
};
</script>

推荐几本我最近读的书：

• 《黑客与画家》
• 《非暴力沟通》
• 《精彩人生的一分钟》
• 《程序员的自我修养》

：

曾经认为，别人写的书，都是他们自己的人生观念，那又不是我，我没必要去关注，也不需要浪费时间精力去知道，毕竟我的人生我自己做主。

当我坚持读完一本书后，发现，曾经以为多么高尚的自我人生是多么平凡和普通：每一个人都正在经历着跟我一样的人生，甚至一点小事都有着一样的想法和感受，少部分人的人生被称为传奇，只是因为大部分人没有被抬上舞台来“演出”。

人和人也许就是一个个的复制品，同样的复制品，为什么他和她能够如此的“不平凡”？

我承认自己的平凡和普通，并愿意通过读书，去看一下别人不一样的人生，把那些好的，复制过来。