微信小程序开发常用技巧(6)——列表上拉加载更多

微信小程序API提供了监听页面用户下拉刷新事件,但是没有提供上拉监听事件,实际开发过程中经常会用到上拉列表,加载更多的需求。那么如何实现呢?
实现原理:利用onReachBottom监听页面滑动到底部,然后执行具体的函数方法,例如请求数据,然后将列表数据进行重新赋值。
先看看页面效果图:
(加载更多数据)
这里写图片描述
(数据加载完毕)
这里写图片描述
代码如下:

<!--index.wxml-->
<view class="class_list">
  <view class="class_item" wx:for="{{list_data}}">
    item{{item}}
  </view>
  <view class="class_item class_item_end">
    {{title}}
  </view>
</view>
/**index.wxss**/
.class_list{
  background-color: #fff;
  color: #000;
}
.class_item{
  border-bottom: solid #f5f5f5 1px;
  padding: 20px;
}
.class_item_end{
  text-align: center;
}
page{
  background-color: #f5f5f5;
}
//index.js
Page({
  data:{
    list_data:[],
    title:"正在加载数据..."
  },
  onLoad: function () {
    var that = this
    that.setData({
      list_data:[0,1,2,3,4,5,6,7,8,9]
    })
  }, 
  onReachBottom: function () {
    var that = this
    setTimeout(function(){
      that.setData({
        list_data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
        title: "数据加载完毕"
      })
    },1000)
  }
})

上面代码难度不大,看上去也很易懂,在onReachBottom中使用了setTimeout()模拟请求时间,真实开发中换做https请求。
虽然这是一个完整的demo,但是还有很多小瑕疵,各位初学者可以自行尝试解决:
1、如何改为真实的https请求?
2、如果一次请求还没收到返回值,再次调用了该方法,如何避免重复调用https?
3、尝试结合API中的下拉加载更多,实现一个完整的demo
4、现在监听的是滑动到页面底部,但是实际情况下,应该当最下面“正在加载数据…”这一栏顶部出现在页面可视部分,就执行发送请求方法,如何修改,实现?

展开阅读全文

没有更多推荐了,返回首页