微信小程序页面,一般都会有上拉加载更多功能,这个和传统的vue表格分页还是有点区别的,前者是从接口返回结果,拿到当前页面的大小,当前页等参数,后者是通过点击获取当前索引当参数,具体实现,如下:
<scroll-view scroll-y="true" show-scrollbar='false' class="main" :style="{height:scrollHeight}" @scrolltolower="scrolltolower">
<view class="record" v-for="(item,index) in recordList" :key='index'>
<view class="recordRight">
<view class="statusIcon" :class="`statusIcon`+item.type"></view>
<view class="recordInfo">
<view class="statusAndTime">
<view class="status" v-cloak>{{item.title}}</view>
<view class="time">{{item.date}}</view>
</view>
<view class="money" :class="[item.count > 0 ? 'status1' : 'statusStyle' ]" v-cloak>{{item.count > 0 ? '+' + item.count : item.count}}</view></view>
</view>
</view>
<view class="noMoreData" v-if="noMoreData">没有更多记录了</view>
</scroll-view>
注意:scroll-y="true"表示可以垂直滑动
:style="{height:scrollHeight}"为一进入页面获取页面高度
@scrolltolower="scrolltolower"当滑到底部触发的函数
<script>
export default {
data() {
return {
recordList:[],
scrollHeight:'0', // 初始化页面时获取页面高度
maxIndex: 0,
minIndex: 0,
noMoreData:false
}
},
created() {
this.getRecord()
this.initScrollHeight()
},
methods:{
getRecord() {
this.$api.post('', {
userid: this.userId,
max_index: this.maxIndex, // 当前页面显示的条数
min_index: this.minIndex // 第几页
}).then((res) => {
if(res.data.RequestStatus === 100) {
this.maxIndex=res.data.Data.max_index // 将接口的显示条数存起来,当下拉到底部的时候回传
this.minIndex=res.data.Data.min_index // 将接口每次滑到底部的页数存起来,用于回传显示当前页数下的数据
this.recordList=this.recordList.concat(res.data.Data.record_list) // 将每页的数据汇总起来
if(this.minIndex<=1) {this.noMoreData=true} // 当前页为<=1时,显示无数据
} else {
this.$showToast(res.data.Msg)
}
if(this.recordList.length<=0){this.noMoreData=true}
})
},
// 初始化页面时获取页面高度
initScrollHeight(){
let _self=this // success的作用域是闭合作用域,所以要重新声明一个this
uni.getSystemInfo({
success: function (res) {
_self.scrollHeight=res.windowHeight+'px'
}
})
},
// 当每次滑动到底部再次请求接口,实现上啦加载更多刷新
scrolltolower(){
if(!this.noMoreData){
this.getRecord()
}
}