vue 微信小程序数据分页处理 onReachBottom上拉刷新加载数据

vue 微信小程序数据分页处理 通过onReachBottom上拉刷新加载数据 , 配合is_reach来操控是否可以下拉刷新数据

<template>
  <view> 
    <view class="contentBox">
      <view class="flex justify-between align-center" style="margin-bottom: 64rpx;">
        <view class="text-16 text-blod-700  comBlackColor">我的车辆 <text class="count">( 总计{{totals || 0}}辆 )</text> </view>
      </view>
      <view class="carInfo" v-for="item in carLists" :key="item.id">
        <view class="flex justify-between">
          <view class="text-center">
            <image v-if="item.car_ident=='客车'"
              src="https://oss.lanlnk.com/gxjtbbc/default/202306/16/u7MNW6wK3Tk0YI36Src82tpAzJwALX4IBGFnJO6b.png"
              mode="" style="width:40rpx;height:40rpx"></image>
            <image v-else
              src="https://oss.lanlnk.com/gxjtbbc/default/202306/16/A5UXiMrObcBabdmV4AiBRPSgaindntkXeVhSwGuH.png"
              mode="" style="width:40rpx;height:40rpx"></image>
            <view class="text-5 text-blod-500 comBlackColor">{{item.car_ident}}</view>
          </view>
          <view style="width: 2rpx;height: 58rpx;border: 2rpx solid rgba(222,221,221,0.5);margin: 0 20rpx 0 34rpx;">
          </view>
          <view>
            <view class="userType">{{item.cust_type}}</view>
            <view class="text-18 text-blod-700 comBlackColor">{{item.car_no}}</view>
          </view>
        </view>
        <view class="comThemeColor text-center">
          <view class="text-12 mb-10">ETC消费金</view>
          <view class="text-18 text-blod-700">¥ {{item.sum_fee}}</view>
        </view>
      </view>
      //注意:跟随在数据的尾处作提示是否到底即可
      <view v-if="carLists.length>0" style="text-align: center;padding: 60rpx;color:#969696">{{current_page == last_page ? '—到底了—':'上拉加载更多..'}}</view>
      <view v-else style="text-align: center;padding: 60rpx;color:#969696">暂无数据</view>
    </view> 
  </view>
</template>

<script> 
export default {
  data () {
    return {
      carLists: [],
      current_page: '',
      last_page: '',
       queryParams: {  
        page_size: 20,
        page: 1,
      }, 
      totals:0,
      is_reach:true,//是否可 下拉
    }
  },
  onShow () {
    this.getCarLists()
  },
 onReachBottom(){
	 if(this.is_reach){
	 this.queryParams.page++;
	 this.getCarLists();
	 }
	},
  methods: {
    async getCarLists () {
      const res=await mileageUserCarList(this.queryParams)  
      if(res.data.code==0) { 
        this.carLists=this.carLists.concat(res.data.result.data);
        this.current_page=res.data.result.current_page
        this.last_page=res.data.result.last_page
        this.totals=res.data.result.total
        if(this.current_page<this.last_page){
	      this.is_reach=true
	   }else{
	     this.is_reach=false
	  }
      }

    }
  }
}
</script>