小程序中向下加载可通过scroll-view来实现,scroll-view用法官方链接https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html。
<scroll-view class="main" scroll-y="false" bindscrolltolower="bottom">
//scroll-view需设定高度,内部元素超出滚动,可通过设定scroll-y="false" 来隐藏滚动条
//scroll-view中flex无效
//bindscrolltolower为滚动到底部触发的事件
<view wx:for="{{data}}" wx:key="index" >
{{item}}
</view>
</scroll-view>
由bindscrolltolower可通过,对data数组进行拼接实现向下加载,当页面划到最下方时触发事件,拼接data,加载新数据。
//底部触发
bottom () {
//判断当前页与总页数关系,未加载完成时到底部时继续加载
if(nowpage < allallpage){
//添加简单的加载特效,模拟数据加载
wx.showLoading({
title: '加载中',
})
setTimeout(function () {
wx.hideLoading()
}, 300)
nowpage = nowpage + 1
this.data.data = this.data.data.concat(newdata)
this.setData({
data: this.data.data
})
}else{
wx.showToast({
title: '到底了', //显示的标题
icon: 'none', //显示的图标
duration: 1000 //显示的时间2s
})
}
},