所属分类：php教程
一、代码环境
一开始用的是scroll-view组件，但是真机运用的时候发现上拉加载更多的时候，数据有跳动，对用户交互及其不友好，所以决定修改上拉加载更多的效果
我用的是wepy框架，参照多个网上文档，也参照官方文档主要用的是onReachBottom()事件
二、代码
视图层：
微博登录
QQ登录
变更内容：{{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()
})
}登录后复制相关推荐：
微信小程序实例：四个页面跳转的方法（附代码）
微信小程序实例：微信小程序中弹窗的实现代码
以上就是微信小程序实例代码：上拉加载更多的实现方法的详细内容，更多请关注zzsucai.com其它相关文章！
