微信小程序上拉加载——分页

wxml:

<view class="page">
    <scroll-view class="imageViewCss_1" scroll-y="true" bindscrolltolower="toLower" lower-threshold="-100">
        <view class="weui-slidecells" wx:for="{{arrayProject}}" wx:for-item="itemProjec" wx:key="id" data-datas="{{itemProjec}}">
            <mp-slideview buttons="{{slideButtons}}" icon="true" bindbuttontap="slideButtonTap">
                <view class="weui-slidecell">
                    <view class="showTimeCss">
                         {{itemProjec.operate_time}}  
                    </view>
            <!--内容为自定义对象-->
            温度:{{itemProjec.id}}℃ 湿度:{{itemProjec.id}}% </view> </mp-slideview> </view> <view wx:if="{{state==0}}"> <view>没有更多了</view> </view> </scroll-view> </view>

js:

data: {
    //每页显示的行数:
    pagesize: 20,
    //页码(从1开始):
    p: 1,
    //用于标识是否还有更多的状态
    state: 1,
    //用于渲染页面的数组
    arrayProject: [],
    //用于数组的追加和暂存
    allProject: [],
  },
onLoad: function (options) {
    var mythis = this;
    getproinfo(this.data.pagesize, this.data.p, mythis)
},
toLower: function () {
    var that = this;
    var state = that.data.state;
    if (state > 0){
        wx.showLoading({
            title: '加载中...',
        });
        that.data.p = that.data.p + 1;
        getproinfo(this.data.pagesize, this.data.p, that);
        wx.hideLoading();
    }
},        
function getproinfo(pagesize, p, mythis) {
  wx.request({
    url: "******",
    method: 'POST',
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    data: {
      //其他参数"page": p,
      "limit": pagesize
    },
    success: function (res) {
      var resData = res.data;
      var resLength = res.data.length;
      //如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
      if (resLength < 1)
        mythis.setData({
          state: 0
        });
      else {
        var state1 = 1;
        //如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
        if (resLength < mythis.data.pagesize)
          var state1 = 0;
        //循环将结果集追加到数组后面
        for (var i = 0; i < resLength; i++) {
          mythis.data.allProject.push(resData[i]);
        }
        mythis.setData({
          arrayProject: mythis.data.allProject,
          state: state1
        });
      }
      //console.log(mythis.data.arrayProject)
    },
    fail: function (res) {
      //console.log(res);
    }
  });
}

wxss:

page,
.page{
  height: 100%;
}
.imageViewCss_1{  
  width: 100%;
  height: 100%;
}
.showTimeCss{
  font-size:14px;
  font-family: NSimSun;
}

猜你喜欢

转载自www.cnblogs.com/qianyou304/p/11983602.html