1. 程式人生 > >小程式學習之旅----上拉重新整理例項

小程式學習之旅----上拉重新整理例項

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    list: [],
    windowHeight: '400',
    page: 1,
    flag: true
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    this.requestData()
    //獲取螢幕高度
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.model)
        console.log(res.pixelRatio)
        console.log(res.windowWidth)
        console.log(res.windowHeight)
        console.log(res.language)
        console.log(res.version)
        console.log(res.platform)
        that.setData({
          windowHeight: res.windowHeight
        })
      }
    })
  },
  requestData () {
    this.setData({
      flag: false
    })
    var that = this
    var api = 'http://www.phonegap100.com/appapi.php';
    wx.request({
      url: api, //僅為示例,並非真實的介面地址
      data: {
        a: 'getPortalList',
        catid: '20',
        page: that.data.page
      },
      header: {
        'content-type': 'application/json' // 預設值
      },
      success (res) {

        if (res.data.result.length < 20) {
          var f = false;
        } else {
          var f = true;
        }
        console.log(res.data)
        var list = that.data.list.concat(res.data.result)
        var page = ++that.data.page;
        that.setData({
          list: list,
          page: page,
          flag: f
        })
      }
    })
  },
  loadMore () {
    if (this.data.flag) {
      this.requestData();
    }
  }
})
<scroll-view scroll-y style="height:\{\{windowHeight\}\}px" bindscrolltolower="loadMore">
  <view class="list">
    <view class="item" wx:for='{{list}}' wx:key='{{index}}'>
      {{item.title}}
    </view>
  </view>
</scroll-view>