微信小程序分页加载更多

页面wxml

//lower-threshold="100"设置触底高度
<scroll-view scroll-y='true' lower-threshold="100" bindscrolltolower="scrollToLower">
      <block wx:for="{{List}}" wx:for-item="item" wx:key="{{item.id}}">
        <view class="_title">
          <view class="font-color">特别事项:</view>
          <text>{{item.interiorNum}}</text>
        </view>
      </block>
</scroll-view>
 <!-- 数据渲染end -->
    <!-- <view style="text-align: center;margin: 9px;">
      <view wx:if="{{noMore}}">没有更多了</view>
    </view> -->
    <!--底部添加  -->

js相关

data: {
    List:'',
    isPage:false,//第一页默认false
    pageNo:1,//第一页
    noMore:false//页面数据到底时为true
  },
   //列表数据查询
  serchList: function (isPage) {
    let that = this;
    let pageNo=that.data.pageNo
    util.request({
      url: util.localhost + 'xxx',
      data: {
        "pageNo": pageNo,
        "pageSize": "5"
      },
      success: function (res) {
        let data = res.data;
        if (200 == data.status) {
        //如果isPage为true即为第二页,进行数据拼接
          if (isPage){
            that.setData({
              List: that.data.List.concat(data)
            })
          }else{
            that.setData({
              List:data
            })
          }
        } else {
          wx: wx.showToast({
            title: data.msg,
            image: '../../../image/wrong.png',
          })
        }
        //当数组长度为零时页面底部显示到底了
        if (data.data.length==0){
          wx: wx.showToast({
            title: '没有更多了',
            image: '../../../image/wrong.png',
          })
          that.setData({
            noMore: true
          })
        }
      },
      fail: function (err) {
        wx: wx.showToast({
          title: '请求失败!',
          image: '../../../image/wrong.png',
        })
      }
    });
    }

到达底部页数+1

//到达底部
  scrollToLower: function (e) {
    let that = this;
    if (!that.data.noMore) {
      wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  
        title: '加载中',
        icon: 'loading',
      });
      setTimeout(() => {
        that.setData({
          pageNo: that.data.pageNo + 1
        });
        wx.hideLoading();
        that.serchList(true);
      }, 1500);
    }else{
      wx: wx.showToast({
        title: '没有更多了',
        image: '../../../image/wrong.png',
      })
    }
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值