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

最新推荐文章于 2024-06-20 22:03:11 发布

原创最新推荐文章于 2024-06-20 22:03:11 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用uni-app框架实现的斗鱼直播页面布局及数据动态加载的示例。该页面通过调用API获取直播房间列表，并采用uni-list组件展示直播房间的图片、名称等信息。同时，实现了滚动到底部时自动加载更多数据的功能。

<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>