功能實例：實現小程序滾動到底部進行翻頁的功能
適用范圍：所有的微信小程序版本

我們在做分頁的時候可以使用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; }

總結

以上是生活随笔為你收集整理的小程序滑动到底部进行分页的功能实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。