功能實(shí)例：實(shí)現(xiàn)小程序滾動(dòng)到底部進(jìn)行翻頁(yè)的功能
適用范圍：所有的微信小程序版本

我們?cè)谧龇猪?yè)的時(shí)候可以使用scroll-view的標(biāo)簽進(jìn)行開(kāi)發(fā)，通過(guò)給他設(shè)置寬高來(lái)達(dá)到滑動(dòng)的效果，以下是代碼片段。

wxml中的代碼片段

<scroll-view class="scrollbar-page" scroll-y bindscrolltolower='nextPage'><block wx:for="{{pageData}}" wx:key="key">這里寫(xiě)你的內(nèi)容進(jìn)行循環(huán)輸出就好了</block><view class="tips-text" wx:if="{{pageData.length<1}}">頁(yè)面無(wú)數(shù)據(jù)！</view></scroll-view></view>

注：要記得給scroll-view 外面包一個(gè)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 },//獲取頁(yè)面數(shù)據(jù)的代碼 getPage(){//優(yōu)先請(qǐng)求數(shù)據(jù)獲取到數(shù)據(jù)后進(jìn)行設(shè)置數(shù)據(jù)及增加page的值this.setData({pageData: ‘自定義一個(gè)頁(yè)面新整數(shù)據(jù)的函數(shù)，通過(guò)它將老數(shù)據(jù)和新數(shù)據(jù)拼接。’,page: page + 1,}) },//滾動(dòng)到底部監(jiān)聽(tīng)翻頁(yè)代碼nextPage(e) {this.getPage();}})

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

//分頁(yè)數(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é)

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

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