|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 本篇文章給大家帶來的內容是關于微信小程序實例代碼:上拉加載更多的實現方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。一、代碼環境 一開始用的是scroll-view組件,但是真機運用的時候發現上拉加載更多的時候,數據有跳動,對用戶交互及其不友好,所以決定修改上拉加載更多的效果 我用的是wepy框架,參照多個網上文檔,也參照官方文檔主要用的是onReachBottom()事件 二、代碼 視圖層: <repeat for="{{recordList}}" key="index" index="index" item="item" >
<view class="zan-panel">
<view class="zan-cell">
<view class="zan-cell__bd">變更內容:{{item.typeText}}</view>
<view class="zan-cell__ft">¥<text style="padding-left:4rpx">{{item.totalFee/100}}</text></view>
</view>
<view class="zan-cell">
<view class="zan-cell__bd zan-font-12 zan-c-gray-dark">變更時間:{{item.updateTime}}</view>
</view>
</view>
</repeat>
<block wx:if="{{recordList.length > pageSize}}">
<block wx:if="{{updateLoadShow}}">
<updateLoad :loading="updateLoadShow"></updateLoad>
</block>
<view class="doc-description zan-center" style="font-size:12px;" wx:else>
<text>{{updateLoadTxt}}</text>
</view>
</block>說明:如果數據不超過一屏,向上拉回無法觸發onReachBottom()事件,所以我做的處理是 “ (當前屏幕高度 / 實際一個列表循環高度 )+1”,保證數據能超過一屏。 onLoad() {
// 獲取系統消息
wepy.getSystemInfo({
success: (res) => {
this.height = res.windowHeight
this.pageSize = Math.round(res.windowHeight / 103) + 1
this.$apply()
}
})
}邏輯層寫: // 上拉加載
onReachBottom() {
// 上拉加載更多loading
this.updateLoadShow = true
let _length = this.recordList.length
// 列表長度與列表總數對比
if (_length === this.pagtotal) {
setTimeout(() => {
this.updateLoadShow = false
this.$apply()
}, 1000)
} else {
// 當前頁碼加一
this.pageNum++
// 更新數據
this.getData()
}
}
// 獲取數據
getData() {
const pageNum = this.pageNum
api.get(recordURL + 'queryBalanceSub?start=' + pageNum + '&size=' + this.pageSize + '&sortStr=update_time&sortType=desc').then(({data}) => {
if (pageNum === 1) {
this.recordList = data.list
this.pagtotal = data.totalRow
} else {
this.recordList = this.recordList.concat(data.list)
}
this.loadingShow = false
this.updateLoadShow = false
this.$apply()
})
}相關推薦: 以上就是微信小程序實例代碼:上拉加載更多的實現方法的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!