一个简单的实现“加载更多“的demo

曾经终败给现在 2021-07-25 14:55 357阅读 0赞

<template>
      <view class="">
        <uni-list>
        	<uni-list-item v-for="(item,index) in data.list" :key="index" title="">
    			<view slot="header">
    				<image :src="item.roomSrc" style="width: 250rpx;height: 150rpx;" mode=""></image>
    			</view>
    			<view style="font-size: 20rpx;margin-left: 10px;" slot="body">
    				<view>{ { item.roomName}}</view>
    				<view>{ { item.nickroom}}</view>
    				<view>{ { item.hn}}</view>
    			</view>
    
    		</uni-list-item>
        </uni-list>
    	<template>
    		<uni-load-more :status="this.more"></uni-load-more>
    	</template>
      </view>
    </template>
    
    <script>
    
    
    export default { 
      name: '',
      data () { 
        return { 
          data:{ },
    	  more:"more",//调整刷新到底部时的效果
    	  page:1
        }
      },
      mounted() { 
      	this.getData()
      },
      methods:{ 
    	  onReachBottom(){ 
    		  if(this.page===3)return  //假设只有3页，那当当前页码数等于后台的返回的最大页码数时return
    		  // if(totalPage==this.page)return
    		  this.more="loading"
    		  uni.request({ 
    		  	url:"https://m.douyu.com/api/room/list",
    		  			method:"GET",
    		  			data:{ page:this.page+1,type:"LOL"},
    		  			success:res=>{ 
    		  				console.log(res)
    
    						res.data.data.list=this.data.list.concat(res.data.data.list)
    		  				this.data= res.data.data
    		  				// console.log(this.data)
    						this.page=this.page+1
    						console.log(this.page)
    						// const totalPage=3
    						//当当前页码数等于最大页码数时候，切换底部动画
    						if(this.page===3){ 
    							this.more="noMore"
    						}else{ 
    							this.more="more"
    						}
    						 
    		  			},
    		  })
    		 
    	  },
    	  getData(){ 
    		  uni.request({ 
    		  	url:"https://m.douyu.com/api/room/list",
    			method:"GET",
    			data:{ page:1,type:"LOL"},
    			success:res=>{ 
    				console.log(res)
    				this.data=res.data.data
    				console.log(this.data)
    			},
    		  })
    	  }
      }
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>