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

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

一、代码环境

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

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

二、代码

视图层：

 repeat for= {{recordList}} key= index index= index item= item 
 view >
说明：如果数据不超过一屏，向上拉回无法触发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 + #39;queryBalanceSub?start= #39; + pageNum + #39; size= #39; + this.pageSize + #39; sortStr=update_time sortType=desc #39;).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中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！