分頁載入功能大家遇到的應該會經常遇到，應用場景也很多，例如微博，QQ，微信朋友圈以及新聞類應用，都會有分頁載入的功能，這不僅節省了我們使用者的流量，還提升了使用者體驗。那麼今天的這篇文章就是介紹微信小程式中如何實現分頁載入的功能。

資料來自於後端（lumen帶分頁）

    /**
     * @todo 獲取訂單列表
     * @return mixed
     */
    public function getOrderList(){
        $field = ['id','order_no','name','created_at','desc','order_status','pay_status'];
        $orders = Order::where('uid',$this->user->id)->orderBy('created_at', 'desc')->paginate(5, $field);
        return $orders;
    }
 

資料

..wxjs

const util = require('../../utils/util.js');
Page({
	/**
	 * 頁面的初始資料
	 */
  data: {
    // 前臺顯示list
    showlist: [],
    // 初始化page
    page: 2,
    height:600,
  },
  onLoad: function (options) {
    var self = this;
    // 請求後臺 
    util.ajax('order/get' , '', 'GET', res => {
        self.setData({
          showlist: res.data,
        })
    })
  },
  /**
 * 頁面上拉觸底事件的處理函式
 */
  upcroll: function (e) {
    var self = this;
    var page = self.data.page++;
    // 請求後臺，獲取下一頁的資料。
    util.ajax('order/get?page=' + page, '', 'GET', res => {
      self.setData({
        //向頁面已有資料後面加資料
        showlist: self.data.showlist.concat(res.data),
      })
      if (res.data=='') {
        wx.showToast({
          title: '沒有更多資料',
        })
      }
    })
  }
})
 

..wxml

<view class='warp'>
<view class='container' >
	<scroll-view scroll-y='true' style="height:{{height}}px"  bindscrolltolower="upcroll" lower-threshold="20" >
  	<view class='alllist' wx:for="{{showlist}}" wx:for-item="j" wx:key="key" name="info_border">
			<view class='list'>
				<view class='img'>
					<image src='../../imges/imgicon/icon2.png' class='img'></image>
					<view class='text'>{{j.name}}</view>
				</view>
				<view class='message'>
					<view class='te'><text class='text'>日期：</text><text class='text cor'>{{j.created_at}}</text></view>
					<view class='te text on'><text class='text'>描述：</text>{{j.desc}}</view>
				</view>
			</view>
			<view class='text statsin'>
			<view class='a left'>
				<navigator url='#' class='waiting' >待接單</navigator>
			</view>
				<view class='a'>
				<navigator url='#' class='okorder'>已完成</navigator>
				</view>
			</view>
		</view>
  </scroll-view>
	</view>	
</view>
 

結果：