微信小程序，使用scroll-view實現下拉加載更多（下一頁）源碼

maker一下使用scroll-view實現下拉加載更多（下一頁），比較粗糙，如下圖。
由於數據是死數據，只能加載一次（如圖）。

源碼下載：http://download.csdn.net/download/dknightl/9922174

下拉邏輯由scroll-view裏的bindscrolltolower參數實現。
判斷是否可以下拉由當前頁數和總頁數比較判斷

• wxml

<!--index.wxml-->
<view class="borderTop1px"></view>
<block wx:if="{{resultShow}}">
  <view class="content_zero" animation="{{animationData}}" wx:if="{{orderList.length==0}}" >
    <image mode="aspectFit" src="../../../../image/search_zero.png"></image> 
    <view class="tip color_888888">沒有該{{orderCon==0?'商品':'用戶'}}的訂單記錄</view>
  </view>


  <scroll-view scroll-y scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px;" 
      bindscrolltolower="loadMore" bindscroll="scroll">

  <block wx:for="{{orderList}}">

    <view animation="{{animationData}}" class="order_msg bg_fff" >

      <view class="item_status display-flex-row">
        <view class="">
          <image src="../../image/oreder-desc.png"></image>
        </view>
        <view wx:if="{{item.state==1}}" class="status_content color_ff6700">待付款</view>  
        <view wx:elif="{{item.state==2}}" class="status_content color_ff6700">待發貨</view>    
        <view wx:elif="{{item.state==3}}" class="status_content color_ff6700">待收貨</view>    
        <view wx:elif="{{item.state==4}}" class="status_content color_ff6700">已完成</view>    
        <view wx:else="{{item.state==5}}" class="status_content color_ff6700">異常</view>      
      </view>

      <view class="item_wrap display-flex-row" wx:for="{{item.goods}}">
        <image src="{{item.good.good_display_img}}" mode="aspectFit" class="item_item_image"></image>
        <view class="item_msg" >

          <view class="item_item_title" >
              <view class="text-hide">{{item.good.good_name}}</view>
          </view>
          <view class="item_item_bot">              
            <view class="color_888888 text-hide" >
              花型:<block wx:for="{{item.flowers}}" >
                <text> {{item.flower_name}}</text>
              </block>                 
            </view>
            <view class="display-flex-row" style="justify-content: space-between;">
              <view class="item_item_price">¥{{item.good.good_price}}</view>
              <view>x{{item.number}}</view>
            </view>

          </view>

        </view>
      </view>

      <view class="item_count display-flex-row">
        <view class="count_content">合計:<span class="count_price">¥{{item.totalprice}}</span></view>    
      </view>
    </view>


  </block>
  </scroll-view>

    <view class="loading_area display-flex-row" wx:if="{{showLoadding}}">  
      <icon type="waiting" size="20"  color="#ff6700"/>
      <view>加載中...</view> 
    </view>


</block>

• js

//index.js
var app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    chooseGoods: {},
    startDate: "",
    endDate: "",
    orderList: [],//訂單列表

    //假數據
    dataList:

    { "count": 2,//總頁數 
      "list": [
        { "goods": [{ "number": 1, "flowers": [{ "flower_name": "花花" }],
          "order_good_id": "0e96b13e39ea49bcbce6c5ccee32ab4e", 
          "good_id": "1585b32f67e04106b4c685dcec1aa556", 
          "order_id": "5892d23092ec48b5976e80c71031f788", 
          "good": {  
            "good_display_img": "../../image/zhutu.jpg",  
            "good_name": "小明", 
            "good_price": 10, 
            } 
          }], 
          "order_id": "5892d23092ec48b5976e80c71031f788",
          "totalprice": 120.00  
        }, 
        { "goods": [
            { "number": 1, "flowers": [{ "flower_name": "藍" }], 
              "order_good_id": "0caf434a5d1147838263c0fbcefcc2ef", 
              "good_id": "b7b698cd4bde4e20915177de4367e75e", 
              "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", 
              "good": 
                {
                  "good_display_img": "../../image/zhutu.jpg", 
                  "good_price": 10, 
                  "good_name": "小炮", 
                } 
              }, 
            { "number": 1, "flowers": [{ "flower_name": "ee" }], 
              "order_good_id": "753313f00c6247a2982b654b3de97bd0", 
              "good_id": "1585b32f67e04106b4c685dcec1aa556", 
              "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", 
              "good": 
                { 
                   "good_display_img": "../../image/zhutu.jpg",  
                   "good_name": "小明", 
                   "good_price": 20, 
                } 
            }, 
            { "number": 1, "flowers": [{ "flower_name": "綠" }], 
              "order_good_id": "797ecaf6ec0241a1bce5b21443faff21", 
              "good_id": "c32d93ea90f34ad2b458d3e5f2a9152f", 
              "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", 
              "good": 
                { 

                  "good_display_img": "../../image/zhutu.jpg", 
                  "good_name": "德萊文", 
                  "good_price": 20, 

                } 
            }], 
            "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f",
            "totalprice": 120.00  
          }, 
          { "goods": [
            { "number": 3, "flowers": [{ "flower_name": "綠" }], 
              "order_good_id": "358f6615483a440fa4c00001664aac1c", 
              "good_id": "c32d93ea90f34ad2b458d3e5f2a9152f", 
              "order_id": "01448473609247f894e2de4215124262", 
              "good": 
                {  
                  "good_display_img": "../../image/zhutu.jpg", 
                  "good_price": 20, 
                  "good_name": "德萊文", 
                } 
            }, 
            { "number": 1, "flowers": [{ "flower_name": "花花" }], 
              "order_good_id": 
              "adf0d5d5c7bd480e9b26f21e7e869a45", 
              "good_id": "1585b32f67e04106b4c685dcec1aa556", 
              "order_id": "01448473609247f894e2de4215124262", 
              "good": 
                {  
                  "good_display_img": "../../image/zhutu.jpg", 
                  "good_price": 20, 
                  "good_name": "小明", 
                } 
            }],
              "order_id": "01448473609247f894e2de4215124262" ,
              "totalprice": 120.00  
            }
        ] 
    },

    resultShow: false,//顯示列表
    orderCon: 0,//0表示商品 1表示用戶
    conId: '',//傳過來的id

    windowHeight: '',//屏幕高度 

    scrollPd: false,//是否可滑動
    scrollTop: 0,//設置srcoll-view距離頂部位置
    top: 0,//當前滑塊位置
    page: 1,//當前頁數
    row: 3,//一頁數量

    showLoadding: false,//顯示加載
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;

    //獲得屏幕高度
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight
        })
      },
    })

    //動畫
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })
    animation.translateY(5).step();
    this.setData({
      animationData: animation.export()
    })


    wx.setNavigationBarTitle({
      title: '商品訂單記錄'
    })

    //行數 死數據、只有3行
    var row=that.data.row;

    //獲得數據 默認第一頁
    that.queryOrdersByGood(1, row)


  },


  /**
 * 操作數據
 * 
 * 由於是死數據，page只爲判斷是否還有下一頁
   */
  queryOrdersByGood: function (page, row) {
    var that = this;

    var dataList = that.data.dataList;//假數據
    var count = dataList.count;//總頁數
    var myList = dataList.list;//列

    that.setData({
      orderList: myList.concat(that.data.orderList),//拼接列表
      resultShow: true,//顯示數據
      showLoadding: false,//去除加載提示
      page: page,//存儲當前頁數，爲是否有下一頁做判斷

    })

    //判斷是否還有數據   當前頁小於總頁數則可以下拉加載數據       
    if (parseInt(count) > parseInt(that.data.page)) {
      that.setData({
        scrollPd: true,//顯示滑塊、允許下拉
      })
    }
  },

  /**
 * 加載更多 下一頁 
 * */
  loadMore: function () {
    var that = this;
    var thatData = this.data;
    var pd = thatData.scrollPd;//是否加載數據，true則加載

    //顯示加載
    wx.showToast({
      title: '加載中...',
      duration:100,
      icon: 'loading',
    })

    if (pd) {
      //防止多次觸發滑動到底部事件
      that.setData({
        scrollPd: false//禁止下拉
      })

      var page = thatData.page;//當前頁數
      var row = thatData.row;//數量
      var pageAdd = parseInt(page) + 1;//下一頁

      that.setData({
        showLoadding: true,//顯示加載 
      })

      that.queryOrdersByGood(pageAdd, row);

    }


  },
  /**
 * 滑動事件
 * */
  scroll: function (e) {
    var that = this;
    that.setData({
      top: e.detail.scrollTop
    })
  },
})

• wxss

/**index.wxss**/
/* orderBroList.wxss */

.display-flex-row{
  display: flex;
  flex-direction: row;
}
.borderTop1px{
  border-top: 1px solid #e5e5e5;
}
.bg_fff{
  background-color:#FFF;
}
.order_msg{
  /* margin-top:20rpx; */
  padding:5px 20rpx;
  margin-bottom:10rpx;
}

.select_hidden{
  height: 35px;
}

.order_msg .item_status{
   justify-content: space-between;
  font-size:12pt;
  border-bottom: 1px solid #E5E5E5;
  padding: 10rpx 0 5rpx 0;
}

.order_msg .item_status image{

  width: 18pt;
  height: 18pt;
}

.order_msg .item_wrap {
    justify-content: center;
    align-items: center;
    padding:10rpx 0;
    background-color: #FFF;
    border-bottom: 1px solid #E5E5E5;
    width:710rpx;
}
.order_msg .item_msg{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 550rpx;
  margin-left:20rpx;
  font-size:11pt;
  height: 80px;
}
.order_msg .item_item_image {
    width: 150rpx;
   height: 80px;
}
.order_msg .item_item_title {
    padding: 0 10px 0  0;
}

.item_count {
  font-size:12pt;
  padding-top:10rpx;
  justify-content: flex-end;
}
.item_count .count_price{
  font-size:14pt;
}

.content_zero{
  margin-top:20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content_zero .tip{
  font-size: 10pt;
}
.content_zero image{
  height: 100PX;
}

.loading_area{
  font-size:10pt;
  align-items: center;
  justify-content: center;
  margin:20rpx 0;
}