微信小程序下拉加载更多

微信小程序下拉加载更多

注意问题：
1.当网速比较慢时候，可能会发生重复请求数据，所以需加一个开关的控制
2.窗口必须设置高度，否则无法触发事件
page.wxml

<scroll-view scroll-y style="height: {{windowHeight}}px;" bindscrolltolower="loadMore" >
    <view class='list'>
      <view class='item' wx:for="{{list}}">
        {{item.title}}
      </view> 
    </view>
  </scroll-view>

page.js

// pages/news/news.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],//数据列表
    windowHeight:'400',//窗口高度
    page:1,//页码
    flag:true  //开关 true表示可以请求数据

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.requestData();

    //获取屏幕高度
    var that=this;
    wx.getSystemInfo({
      success: function (res) {
        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: function (res) {
          if (res.data.result.length<20){//请求到的数据length<20时候，表示已经是最后一页，关掉开关
            var f=false;
          }else{

            var f=true;
          }

          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();
    }
  }
})