zoukankan      html  css  js  c++  java
  • 微信小程序上拉加载——分页

    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;
    }
  • 相关阅读:
    计算器程序
    输入三个整数,输出最大数和最小数
    输入三个数a,b,c,要示按由小到大的顺序输出
    最短路
    luogu P3953 逛公园
    二分图匹配
    luogu P3231 消毒
    [bzoj2120] [洛谷P1903] 数颜色
    [bzoj2038] [洛谷P1494] [2009国家集训队] 小Z的袜子(hose)
    [洛谷P4012] [网络流24题] 深海机器人问题
  • 原文地址:https://www.cnblogs.com/qianyou304/p/11983602.html
Copyright © 2011-2022 走看看