<scroll-view scroll-y="true" style="height: {{height+'px'}}" bindscrolltolower="box1">
这里用来存放数据...
</scroll-view>
bindscrolltolower
这是一个事件 当滚动到底部时会去触发
scroll-y="true"
scroll-x="true"
设置x轴滚动还是y轴
height
这是视区高度这里看应用需求 我是使用的wx.getSystemInfoSync().windowHeight
来获取当前页面的高度
之前做滚动的时候使用的onReachBottom
但总不符合自己的需求
因为微信小程序是页面的 比如做分类的时候同一个页面 不同的内容滚动(tab切换这种)如果场景是tab切换的话使用onReachBottom
一个tab切面滚动了另外的页面也会随之滚动
data: {
curren:0,// 选中的样式
current: 1,
page:10,
list:[],
height:'',// 文件视口的高度
flag:true, // 控制请求
len:'' //总数据长度
},
onShow:function(){
this.setData({
current:1,
list:[]
})
this.getData()
var h = wx.getSystemInfoSync().windowHeight;
this.setData({
height:h-50
})
},
// 获取数据
getData()
{
wx.showLoading({
title: '数据加载中',
})
this.setData({
flag:false
})
app.request({
url:'order/getUserOrders',
data:{
"current": this.data.current, // 页码
"page": this.data.page, // 每页显示的数量
"params":
{
"status": this.data.curren // 状态
}
},
method:'POST',
success:(res)=>{
wx.hideLoading()
console.log(res)
this.data.current++
this.setData({
list:this.data.list.concat(res.data.list),
len:res.data.total,
current:this.data.current,
flag:true
})
}
})
},
// 滚动到底部触发事件
box1()
{
if(this.data.flag && this.data.list.length!=this.data.len)
{
this.getData()
}
if(this.data.list.length==this.data.len)
{
wx.showLoading({
title: '数据加载完毕',
})
setTimeout(function () {
wx.hideLoading()
}, 1000)
}
},
这样就实现了相同的页面不相同的模块滚动到底部加载更多数据 (分页)
利用flag
来控制向后台请求数据 减少服务器的压力
最终效果