uniapp实现分页功能

效果图

 <!-- 列表数据 -->
    <view class="homecenter">
      <template v-if="progitlist && progitlist.length > 0">
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="toLowerLoad">
          <view class="conlists" v-for="(item, index) in progitlist" :key="index">
            <view class="content" style="width: 340rpx">{{ item.payTime }}</view>
            <view class="content">{{ item.classificationName || '-' }}</view>
            <view class="content">{{ item.money }}</view>
          </view>
          //这是组件 内容在下边放着
          <uni-load-more :status="status"></uni-load-more>
        </scroll-view>
      </template>
      <view class="noResult" v-else>
        <image class="noImg" src="/static/imgs/noResult2.png">
        <template>
            <view class="line1">暂无内容</view>
         </template>
      </view>
    </view>

  data(){
    return{
       page: 1,
       row: 10,
       total: 0, 
       classificationId:'',
       progitlist: [],
       status: 'empty', // more-加载前；loading-加载中；noMore-没有更多了；empty-空数据
   }
 },
  onLoad(option) {
    this.getlist(1);
  },
 methods:{
  async getlist(page) {
  
      let data = {
      
        page: page,
        
        row: 10,
        
        classificationId: this.classificationId,
        
      };
      
      this.status = 'loading';
      
      let res = await appService.AgencyRevenue(data);
      
      if (res.code == 200) {
       
        this.page = page
        
        this.total = res.data.data.myFinanceIPage.total * 1//因为我这返回的total是字符串1所以最后乘以1
        
        
        if(page == 1){
        
          this.progitlist = res.data.data.myFinanceIPage.records;
          
        }else{
        
          this.progitlist = this.progitlist.concat(res.data.data.myFinanceIPage.records);
          
        }
        

        if(this.progitlist.length == 0){
        
          this.status = 'empty'
          
        }else if(this.progitlist.length >= this.total){
        
          this.status = 'noMore'
          
	    } else {
	    
		  this.status = 'more'
		  
	    }
      }
    },
    // 触底加载
    toLowerLoad() 
    
      if (this.status == 'more') {
      
        this.getlist(this.page + 1);
        
      }
    },
}
<style>
.AgencyCenter{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  //其他都是flex:none
  .homecenter{
     flex:1;
     position: relative;
    .scroll-Y {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .noResult {
        text-align: center;
        padding-top: 10px;
        .noImg {
          width: 360rpx;
          height: 360rpx;
        }
        .line1 {
          font-size: 28rpx;
          font-weight: bold;
          line-height: 40rpx;
          color: #6b6266;
        }
        .line2 {
          font-size: 24rpx;
          font-weight: bold;
          line-height: 34rpx;
          color: #97a3b4;
          margin-top: 10rpx;
        }
        .refresh {
          width: 300rpx;
          height: 88rpx;
          line-height: 88rpx;
          background: #0064ff;
          border-radius: 200rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #fafafa;
          margin: 38rpx auto;
        }
      }
  }
 }
  
</style>

noResult2.png

components---->uni-load-more—>uni-load-more.vue

<template>
  <view class="uni-load-more">
    <view
      v-if="iconType === 'circle' || (iconType === 'auto' && platform === 'android')"
      v-show="status === 'loading' && showIcon"
      class="uni-load-more__img"
    >
      <view :style="{ borderColor: color }" class="loader-android" />
    </view>
    <view v-else v-show="status === 'loading' && showIcon" class="uni-load-more__img">
      <view class="load1 load">
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
      </view>
      <view class="load2 load">
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
      </view>
      <view class="load3 load">
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
        <view :style="{ background: color }" class="uni-load-view_wrapper" />
      </view>
    </view>
    <text :style="{ color: color }" class="uni-load-more__text">
      {{
        status === 'more'
          ? contentDown
          : status === 'loading'
          ? contentRefresh
          : status === 'noMore'
          ? contentNomore
          : contentEmpty
      }}
    </text>
  </view>
</template>

<script>
const platform = uni.getSystemInfoSync().platform;
/**
 * 加载更多组件
 * @description 加载更多组件
 * @tutorial http://www.baidu.com
 * @property {String} status 上拉的状态：more-加载前；loading-加载中；noMore-没有更多了；empty-空数据
 * @property {Boolean} showIcon 是否显示图案
 * @property {String} iconType = [circle|auto] 图案类型，circle为圆形，auto在安卓平台为圆形
 * @property {String} color 颜色
 * @property {String} contentDown more时显示的文本
 * @property {String} contentRefresh loading时显示的文本
 * @property {String} contentNomore noMore时显示的文本
 * @property {String} contentEmpty empty时显示的文本
 * @example <uni-load-more status="more"></uni-load-more>
 */
export default {
  props: {
    status: {
      type: String,
      default: 'more',
    },
    showIcon: {
      type: Boolean,
      default: true,
    },
    iconType: {
      type: String,
      default: 'auto',
    },
    color: {
      type: String,
      default: '#777777',
    },
    contentDown: {
      type: String,
      default: '上拉显示更多',
    },
    contentRefresh: {
      type: String,
      default: '正在加载...',
    },
    contentNomore: {
      type: String,
      default: '没有更多数据了',
    },
    contentEmpty: {
      type: String,
      default: '没有相关数据',
    },
  },
  data() {
    return {
      platform: platform,
    };
  },
};
</script>

<style scoped>
@charset "UTF-8";

.uni-load-more {
  display: flex;
  flex-direction: row;
  height: 80rpx;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
}

.uni-load-more__text {
  font-size: 28rpx;
  color: #999;
}

.uni-load-more__img {
  position: relative;
  height: 24px;
  width: 24px;
  margin-right: 10px;
}

.uni-load-more__img > .load {
  position: absolute;
}

.uni-load-more__img > .load .uni-load-view_wrapper {
  width: 6px;
  height: 2px;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  background: #999;
  position: absolute;
  opacity: 0.2;
  transform-origin: 50%;
  animation: load 0.96s ease infinite;
}

.uni-load-more__img > .load .uni-load-view_wrapper:nth-child(1) {
  transform: rotate(90deg);
  top: 2px;
  left: 9px;
}

.uni-load-more__img > .load .uni-load-view_wrapper:nth-child(2) {
  transform: rotate(180deg);
  top: 11px;
  right: 0;
}

.uni-load-more__img > .load .uni-load-view_wrapper:nth-child(3) {
  transform: rotate(270deg);
  bottom: 2px;
  left: 9px;
}

.uni-load-more__img > .load .uni-load-view_wrapper:nth-child(4) {
  top: 11px;
  left: 0;
}

.uni-load-more__img > .loader-android {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  border: solid 2px #777;
  border-radius: 50%;
  border-bottom-color: transparent !important;
  animation: loader-android 1s 0s linear infinite;
}

.load1,
.load2,
.load3 {
  height: 24px;
  width: 24px;
}

.load2 {
  transform: rotate(30deg);
}

.load3 {
  transform: rotate(60deg);
}

.load1 .uni-load-view_wrapper:nth-child(1) {
  animation-delay: 0s;
}

.load2 .uni-load-view_wrapper:nth-child(1) {
  animation-delay: 80ms;
}

.load3 .uni-load-view_wrapper:nth-child(1) {
  animation-delay: 0.16s;
}

.load1 .uni-load-view_wrapper:nth-child(2) {
  animation-delay: 0.24s;
}

.load2 .uni-load-view_wrapper:nth-child(2) {
  animation-delay: 0.32s;
}

.load3 .uni-load-view_wrapper:nth-child(2) {
  animation-delay: 0.4s;
}

.load1 .uni-load-view_wrapper:nth-child(3) {
  animation-delay: 0.48s;
}

.load2 .uni-load-view_wrapper:nth-child(3) {
  animation-delay: 0.56s;
}

.load3 .uni-load-view_wrapper:nth-child(3) {
  animation-delay: 0.64s;
}

.load1 .uni-load-view_wrapper:nth-child(4) {
  animation-delay: 0.72s;
}

.load2 .uni-load-view_wrapper:nth-child(4) {
  animation-delay: 0.8s;
}

.load3 .uni-load-view_wrapper:nth-child(4) {
  animation-delay: 0.88s;
}

@-webkit-keyframes load {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

@-webkit-keyframes loader-android {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>