小程序上拉加载更多php,微信小程序实例代码：上拉加载更多的实现方法

本篇文章给大家带来的内容是关于微信小程序实例代码：上拉加载更多的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、代码环境

一开始用的是scroll-view组件，但是真机运用的时候发现上拉加载更多的时候，数据有跳动，对用户交互及其不友好，所以决定修改上拉加载更多的效果

我用的是wepy框架，参照多个网上文档，也参照官方文档主要用的是onReachBottom()事件

二、代码

视图层：

变更内容：{{item.typeText}}

￥{{item.totalFee/100}}

变更时间：{{item.updateTime}}

{{updateLoadTxt}}

说明：如果数据不超过一屏，向上拉回无法触发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()

})

}

相关推荐：