【微信小程序】利用scroll-view标签，实现上拉分页加载更多

小程序scroll-view 实现上拉加载

1.wxml

<scroll-view scroll-y style='height:{{windowHeight}}px;' bindscrolltolower="loadMore">
  <!-- bindscrolltolower 滚动到底部/右边时触发 -->
  <view class='list'>
      <view class='item' wx:for="{{list}}">
          {{item.title}}
      </view>
  </view>
</scroll-view>

2.JS

// pages/test/test.js
Page({
  //数据初始化
  data: {
    list:[],             //接收数据的数组
    windowHeight:"",     //适配设备的高度
    page:1,              //记录加载数据的页数参数
    flag:true            //记录是否请求数据的状态
  },
 
  //生命周期函数--监听页面加载
  onLoad: function (options) {
    //获取新闻数据
    this.requestData();
    //把this对象复制到临时变量that
    var that = this;
    //获取设备信息，获取屏幕的Height属性
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          windowHeight : res.windowHeight-n(n为触底距离)
        })
      }
    })
  },
  
  //请求数据
  requestData(){
    //打开记录请求的状态flag
    this.setData({
      flag:false
    })
    //把this对象复制到临时变量that
    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){ //请求成功
        //数据少于20条时，即请求到了最后一页
        if(res.data.result.length < 20){
          //记录请求状态，把reqState传值给flag
          var reqState = false;
        }else{
          var reqState = true;
        }
        //接收数据，保证每次都拼接上
        var list = that.data.list.concat(res.data.result);
        //为下一页的请求参数做准备
        var nextPage = ++that.data.page;
        that.setData({
          list:list,
          page:nextPage,
          flag:reqState
        }) 
      },
      fail:function(error){ //请求失败
        console.log(error);
      }
    })
  },
  //scroll-view 滚动到底部/右边时触发触发
  loadMore(){
    //根据请求状态flag请求数据
    if(this.data.flag){
      this.requestData();
    }
  }
})

3wxss

/* pages/test/test.wxss */
.list{
  padding: 10rpx;
}
 
.item{
  line-height: 88rpx;
  height: 88rpx;
  overflow: hidden;
  border-bottom: 1rpx solid #eee;
}