微信小程序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、现在监听的是滑动到页面底部，但是实际情况下，应该当最下面“正在加载数据…”这一栏顶部出现在页面可视部分，就执行发送请求方法。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！