uniapp实现分页功能

LW0512

已于 2022-10-31 11:20:33 修改

阅读量1.1k

点赞数

分类专栏：小程序文章标签： uni-app javascript 前端

于 2022-10-27 11:33:57 首次发布

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/127548966

版权

本文介绍了如何在uni-app中实现分页功能，通过使用uni-load-more组件，展示了分页加载的效果，并提供了相关组件的路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)

最低0.47元/天解锁文章