原生模式的下拉刷新与上拉加载 ​

<template>
  <page-refresh-x ref="pageRefresh" :currentIndex="currentTabIndex" :tabNum="2" :isLoading="isLoading"  @getData="getData" :isEmpty="demoData.length == 0 ? true : false">
    <view class="list-box">
      <view class="item" v-for="(txt, index) in demoData" :key="index">
        {{ index }} - {{ txt }}
      </view>
    </view>
  </page-refresh-x>
</template>

<script>
// 模拟数据
var data = [1, 2, 3, 4, 5, 6, 7, 8];
// 模拟页码
// var pageNo = 1;
var pageSize = 10; 
export default { 
  data() {
    return {
      currentTabIndex:0,
      isLoading: false,
      pageNo: [1, 1],
      demoData: [],
    };
  },
  computed: {},
  methods: {
    /**
     * 数据加载函数
     * @param {*} isReload  函数用于识别是不是下拉刷新执行的
     */
    getData(isReload) {
      if (isReload) {
        pageNo = 1;
      }
      this.loadingStatus = true;
      console.log("加载函数运行，页码 : " +  pageNo);
      // 模拟 api 请求刷新数据
      setTimeout(() => {
        // 对演示数据随机刷新模拟数据刷新
        var demoArr = this.arrayShuffle(data);
        console.log("list:" + demoArr.length);
        

        if ( pageNo >= 2) {
          this.demoData = this.demoData.concat(demoArr);
        }
        // 第一页 有可能是第一次加载或者刷新
        else {
          // 刷新时重置加载组件状态
          this.demoData = [];
          this.demoData = demoArr;
        } 
         pageNo++;
        //通知处理刷新加载结果
        this.$refs.pageRefresh.reqFinish(
          isReload,
          pageSize,
           pageNo,
          demoArr.length
        );



        //多个tab页面时多传递一个tab索引值来区分不同的页面
        if (this.pageNo[this.currentTabIndex] >= 2) {
            this.demoData[this.currentTabIndex] =
              this.demoData[this.currentTabIndex].concat(reqList);
          }
          // 第一页 有可能是第一次加载或者刷新
          else {
            // 刷新时重置加载组件状态
            this.demoData[this.currentTabIndex] = [];
            this.demoData[this.currentTabIndex] = reqList;
          }
          //通知处理刷新加载结果
          this.$refs.pageRefresh.reqFinish(
            isReload,
            pageSize,
            this.pageNo[this.currentTabIndex],
            reqList.length,
            this.currentTabIndex
          );  
          this.pageNo[this.currentTabIndex]++;


          
          this.isLoading = false; 
          this.$forceUpdate(); 
      }, 1000);
    },
    // 数据随机
    arrayShuffle(arr) {
      let l = arr.length;
      while (l) {
        const i = Math.floor(Math.random() * l--);
        [arr[l], arr[i]] = [arr[i], arr[l]];
      }
      return arr;
    },
  },  
  // 页面周期函数--监听页面加载
  onLoad() {
    // 页码加载时第一次加载数据
     pageNo = 1;
    this.getData();
  }, 
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {
    this.$refs.pageRefresh.pullDownRefresh();
  },
  // 页面处理函数--监听用户上拉触底
  onReachBottom() {
    this.$refs.pageRefresh.reachBottom();
  }
};
</script>

<style scoped lang="scss">
.item {
  background: rgb(168, 167, 168);
  height: 200rpx;
  margin-bottom: 20rpx;
}
</style>