小程序滑动到底部进行分页的功能实例

功能实例：实现小程序滚动到底部进行翻页的功能
适用范围：所有的微信小程序版本

我们在做分页的时候可以使用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;
}