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

我們在做分頁的時候可以使用scroll-view的標(biāo)簽進行開發(fā)，通過給他設(shè)置寬高來達到滑動的效果，以下是代碼片段。

wxml中的代碼片段

<scroll-view class="scrollbar-page" scroll-y bindscrolltolower='nextPage'><block wx:for="{{pageData}}" wx:key="key">這里寫你的內(nèi)容進行循環(huán)輸出就好了</block><view class="tips-text" wx:if="{{pageData.length<1}}">頁面無數(shù)據(jù)！</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 },//獲取頁面數(shù)據(jù)的代碼 getPage(){//優(yōu)先請求數(shù)據(jù)獲取到數(shù)據(jù)后進行設(shè)置數(shù)據(jù)及增加page的值this.setData({pageData: ‘自定義一個頁面新整數(shù)據(jù)的函數(shù)，通過它將老數(shù)據(jù)和新數(shù)據(jù)拼接。’,page: page + 1,}) },//滾動到底部監(jiān)聽翻頁代碼nextPage(e) {this.getPage();}})

自定義的拼接函數(shù)，可以方在util 中進行調(diào)用也可以方在page頁面的js里。

//分頁數(shù)據(jù)拼接 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; }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。