功能实例:实现小程序滚动到底部进行翻页的功能
适用范围:所有的微信小程序版本
我们在做分页的时候可以使用scroll-view的标签进行开发,通过给他设置宽高来达到滑动的效果,以下是代码片段。
wxml中的代码片段
<scroll-view class="scrollbar-page" scroll-y bindscrolltolower='nextPage'>
<block wx:for="{{pageData}}" wx:key="key">
这里写你的内容进行循环输出就好了
</block>
<view class="tips-text" wx:if="{{pageData.length<1}}">页面无数据!</view>
</scroll-view>
</view>
注:要记得给scroll-view 外面包一个view。
wxss样式
.scrollbar-page{
margin: 0rpx;
padding: 0rpx;
height: 100%;
display: flex;
flex-direction: column;
}
.temp-text{
text-align: center;
background: #ffffff;
line-height: 38rpx;
height: 38rpx;
margin-top: 10rpx;
padding: 10rpx;
}
js中的代码
Page({
data:{
page:0
},
//获取页面数据的代码
getPage(){
//优先请求数据获取到数据后进行设置数据及增加page的值
this.setData({
pageData: ‘自定义一个页面新整数据的函数,通过它将老数据和新数据拼接。’,
page: page + 1,
})
},
//滚动到底部监听翻页代码
nextPage(e) {
this.getPage();
}
})
自定义的拼接函数,可以方在util 中进行调用也可以方在page页面的js里。
//分页数据拼接
function upPageData(data) {
let newsArr = data.oldData ? data.oldData : [];
let newData = data.newData ? data.newData : [];
for (var i = 0; i < newData.length; i++) {
newsArr.push(newData[i])
}
return newsArr;
}