<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>
一个简单的实现“加载更多“的demo
最新推荐文章于 2024-03-16 15:30:40 发布