小程序---下拉更新/上拉加载更多

下拉更新效果：

上拉加载更多效果：

这里我使用的是模拟数据，如果要请求后台接口，可以在请求的回调函数中进行数据的对接。

xxx.json

如果你允许全部页面都可以下拉，就在app.json文件里配置如下内容，否则，可以在单个页面的json里设置。

{
  "enablePullDownRefresh": true,   
  "navigationBarTitleText": "测试加载"
}

xxx.wxml

写一些页面内容，这里我循环渲染一系列图片，分为3种状态：原状态、下拉更新时、上拉加载更多时，每种状态改变时，图片会更换为另一系列，方便观察。

<view wx:for='{{imgUrl}}'>
  <image src='{{item}}' style='width:100%;margin-bottom:20rpx;'></image>
</view>

xxx.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl: [
      '../img/banner.png',
      '../img/banner.png',
      '../img/banner.png',
      '../img/banner.png'
    ],
    moreImg: [
      '../img/banner2.png',
      '../img/banner2.png',
      '../img/banner2.png',
      '../img/banner2.png'
    ]
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    var that = this;
    //下拉更新时，把原图片更换成这些图片
    that.data.imgUrl = ['../img/banner1.png', '../img/banner1.png', '../img/banner1.png', '../img/banner1.png'];
    that.setData({
      imgUrl: that.data.imgUrl
    });
    //完成
    setTimeout(function() {
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1500);

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    var that = this;
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    });
    //上拉加载更多时，往原图片里增加图片
    for (var i = 0; i < that.data.moreImg.length; i++) {
      that.data.imgUrl.push(that.data.moreImg[i]);
    }
    that.setData({
      imgUrl: that.data.imgUrl
    });
    //完成
    setTimeout(function () {
      wx.hideLoading();
    }, 1000);
  }
})