小程序下拉加载更多

方法一

order.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    list: [], // 订单列表
    scrollHeight: null, // 列表容器高度
    no_more: false, // 没有更多数据
    isLoading: true, // 是否正在加载中
    page: 1, // 当前页码
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let _this = this;
    // 设置scroll-view高度
    _this.setListHeight();
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 获取订单列表
    this.getOrderList();
  },
  /**
   * 获取订单列表
   */
  getOrderList(isPage, page) {
    let _this = this;
    App._get('order/lists', {
      page: page || 1
    }, result => {
      let resList = result.data.list,
        dataList = _this.data.list;
      if (isPage == true) {
        _this.setData({
          'list.data': dataList.data.concat(resList.data),
          isLoading: false,
        });
      } else {
        _this.setData({
          list: resList,
          isLoading: false,
        });
      }
    });
  },
  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  },
  /**
   * 下拉到底加载数据
   */
  bindDownLoad() {
    // 已经是最后一页
    if (this.data.page >= this.data.list.last_page) {
      this.setData({
        no_more: true
      });
      return false;
    }
    // 加载下一页列表
    this.getOrderList(true, ++this.data.page);
  },
  /**
   * 设置商品列表高度
   */
  setListHeight() {
    let systemInfo = wx.getSystemInfoSync(),
      rpx = systemInfo.windowWidth / 750, // 计算rpx
      tapHeight = Math.floor(rpx * 88), // tap高度
      scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
    this.setData({
      scrollHeight
    });
  },
});

order.wxml

<!-- 订单列表 -->
<view class="goods-detail-box">
<scroll-view bindscrolltolower="bindDownLoad" scroll-y 
style="height: px; width: 750rpx;margin-top:88rpx;">
  <!-- 订单列表不为空 -->
  <view class="wrapper" wx:if="">
    
  </view>
  <view wx:if="">
    <view class="yoshop-notcont">
      <text class="iconfont icon-wushuju"></text>
      <text class="cont">亲,您还没有订单信息哦!</text>
    </view>
  </view>
  <!-- 订单列表全部加载 -->
  <view wx:if="" class="no-more f-30">亲, 没有更多了</view>
</scroll-view>
</view>

order.wxss

.goods-detail-box {
  padding: 0;
  min-height: 150px;
}
/* 没有更多 */
.no-more {
  text-align: center;
  color: #737373;
  padding: 10px 0;
}
.notcont {
  padding: 130rpx 100rpx;
  box-sizing: border-box;
}
.notcont .cont {
  display: block;
  text-align: center;
  font-size: 30rpx;
  color: #999;
  margin-top: 10rpx;
}
.notcont .iconfont {
  font-size: 150rpx;
  color: #ccc;
  text-align: center;
  display: block;
  margin-bottom: 12rpx;
}

方法二

order.json

{
  "navigationBarTitleText": "订单中心",
  "enablePullDownRefresh": true
}

order.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    page:1,
    lists:[],
  },
  onLoad: function (options) {
  },
  onShow: function () {
    var _this = this;
    _this.getOrderData();
  },
  /**
     * 加载页面数据
     */
  getOrderData: function () {
    let _this = this;
    App._get('User/orderlist', {}, function (result) {
      _this.setData({
          lists:result.data.list.data,
          page:_this.data.page+1
      })
    });
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let _this = this;
    App._get('User/orderlist', {
      page: 1,
    }, function (result) {
      _this.setData({
        lists: result.data.list.data,
      });
      wx.stopPullDownRefresh();
      wx.showToast({
        title: '刷新成功',
        icon: 'success',
        duration: 1000
      })
    });
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let _this = this;
    let page = _this.data.page;
    wx.showLoading({
      title: '加载中...',
    })
    App._get('User/orderlist', {
      page: page,
    }, function (result) {
      setTimeout(function () {
        wx.hideLoading()
      }, 500)
      if (result.data.list.data.length > 0) {
        var lists = _this.data.lists;
        for (var i = 0; i < result.data.list.data.length; i++) {
          lists.push(result.data[i]);
        }
        _this.setData({
          lists: lists,
          page: page + 1
        });
      } else {
        setTimeout(function () {
          wx.hideLoading()
        }, 500)
        wx.showToast({
          title: '加载完毕',
          icon: 'none',
          duration: 3000
        })
      }
    });
  },  
})

order.wxml

<view wx:if="" class="order-list">
</view>
<view wx:if="" class="order-list">
	<view class="order-items">
		<text class="list-no">暂无数据!</text>
	</view>
</view>

order.wxss

.order-items {
  position: relative;
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.list-no{
  display: block;
  font-size: 30rpx;
  padding: 30rpx 0;
  text-align: center;
}