小程序下拉刷新、上拉加载

（一）小程序集成Bmob作为数据存储
（二）小程序中Flex布局
（三）小程序使用高德地图获取地理位置
（四）小程序列表条目点击
（五）小程序下拉刷新、上拉加载
（六）小程序总结

下拉刷新、上拉加载是使用比价多的一个功能，微信小程序有两种方式实现：

一、onPullDownRefresh 和 onReachBottom 方法实现

1、首先要在.json文件中设置属性

  "enablePullDownRefresh": true

可以在app.json的window中设置全局属性，也可以在需要的页面.json中设置单个页面

2、页面上拉、下拉的处理函数

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("下拉");
    wx.showNavigationBarLoading();
    
    that.setData({ page: 10, refresh: false })
    that.onBmobRequest()

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("上拉")
    wx.showLoading({
      title: 'loading...',
    })
    that.setData({ page: that.page + 10 })
    that.onBmobRequest()
  },

 onBmobRequest: function () {
    var Diary = Bmob.Object.extend("diary1");
    var query = new Bmob.Query(Diary);
    //对createdAt字段降序排列
    query.descending("createdAt");
    //分页查询
    query.limit(that.data.page);

    query.find({
      success: function (results) {


        var arr = [];

        for (var i = 0; i < results.length; i++) {
          arr.push(results[i]._serverData)

        }

        that.setData({ resultsData: arr, isRequest: true, refresh: true });
        if (that.data.page == 10) {
          wx.hideNavigationBarLoading();
          // 停止下拉动作  
          wx.stopPullDownRefresh();

        } else {
          wx.hideLoading();

        }



      },
      error: function (error) {
        console.log("查询失败: " + error.code + " " + error.message);
      }
    });

二、scroll-view里设定bindscrolltoupper 和 bindscrolltolower实现

index1.js

  bindRefresh: function () {
    
    console.log("下拉...");

    that.setData({ page: 10, refresh: false })

    that.onBmobRequest()

  },

  bindLoadMore: function () {
    console.log("上拉...");

    that.setData({ page: that.page + 10, hidden: false })

    that.onBmobRequest()


  },

onBmobRequest: function () {
    var Diary = Bmob.Object.extend("diary1");
    var query = new Bmob.Query(Diary);
    //对createdAt字段降序排列
    query.descending("createdAt");
    //分页查询
    query.limit(that.data.page);

    query.find({
      success: function (results) {

        // 循环处理查询到的数据

        var arr = [];

        for (var i = 0; i < results.length; i++) {
          arr.push(results[i]._serverData)

        }

        that.setData({ resultsData: arr, isRequest: true, refresh: true });
        if (that.data.page == 10) {

          that.setData({ refresh: true })

        } else {
          that.setData({ hidden: true })
        }



      },
      error: function (error) {
        console.log("查询失败: " + error.code + " " + error.message);
      }
    });
}

index1.wxml

<!--index1.wxml-->
<view class="container" >
<view class='refresh' hidden='{{refresh}}'>
<text>下拉刷新...</text>
</view>
<scroll-view  scroll-top="{{scrollTop}}" scroll-y="true" 
style='height:{{scrollHeight}}px;'
bindscrolltoupper="bindRefresh" 
bindscrolltolower="bindLoadMore"
>

 <view class='content-column' wx:for='{{resultsData}}' wx:key=''>

<view   class='content-row' >
<view class='left'>
<image class='avatar' src='{{item.avatarUrl}}' ></image>
</view>

 <view class='right'>
 
 <text class='nikeName'>{{item.nickName}}</text>
 <text class='think'>{{item.think}}</text>

<view class='images'>

<image src='{{item}}' class='image-item' mode='aspectFill' wx:for='{{item.photo}}' wx:key=''></image>

</view>
<text class='address-item'>{{item.address}}</text>
<text class='date-item'>{{item.date}}</text>

 </view>
</view>
  

 </view>
 </scroll-view>
 <view>
 
 <loading hidden="{{hidden}}">加载中...</loading>
 
 </view>

</view>

查看官方文档，scroll-view就是里面内容有各种滑动触发事件的DIV容器，比如触底、触顶、滚动条滚动。
其中的几个属性
scroll-top : 设置滚动条的位置
scroll-y ：是否允许竖向滑动，
height : 是组件的高度
bindscrolltolower : 是绑定触底触发的事件
bindscrolltoupper : 触顶触发的事件,由于是触顶触发事件，不太合适用来做下拉刷新

源码下载