小程序分页加载

 <scroll-view class='goods-scroll-view' scroll-y style="height: {{scrollViewHeight}}px;" bindscrolltolower="scrollToLower" bindscrolltoupper="scrollToUpper">
  <view class='goods-list'>
    //内容
    <view class='isLoading-tip' hidden='{{!isLoading}}'>
      <van-loading type="spinner" />
    </view>
  </view>
  <view class='no-goods' wx:if="{{isShowNoGoods}}">
    <image mode='aspectFit' style='width' src='../../../../images/no-data-img.png'></image>
  </view>
  <view class='no-more-goods' wx:if="{{isShowNoMoreGoods}}">
    <text>没有更多了</text>
  </view>
</scroll-view>
data:{
  page:1,//分页
    page_size:8,//一页的数据
    goods_list:[],//商品列表
    scrollViewHeight:400,
    loadMore:true,//是否启动滚动加载
    isLoading:false,//是否正在加载
    isShowNoGoods:false,//是否显示没有数据
    isShowNoMoreGoods:false,//是否显示没有更多了
},
 loadMoreGoods:function(){
    var that = this;
    //显示正在加载动画
    that.setData({
      isLoading: true,
    })
    MBC.Ajax({
      url: api.searchGoods,
      is_login: true,
      data: {
        goods_name: that.data.searchValue,
        class_id: that.data.class_id,
        page: that.data.page,
        page_size: that.data.page_size
      },
      success: function (res) {
        if(res.result.goods_list == 0 && that.data.page == '1'){
          //第一页就没有数据
          that.setData({
            isShowNoGoods:true,//显示没有数据
            loadMore: false,//不启用滚动加载
            isLoading: false,//结束加载动画
          })
        }
        if (res.result.goods_list.length == 0) {
          that.setData({
            loadMore: false,//不启用滚动加载
            isLoading: false,//结束加载动画
            isShowNoMoreGoods: true,//显示没有更多数据
          })
        } else if (res.result.goods_list.length > 0 && res.result.goods_list.length < that.data.page_size) {
          that.data.goods_list.push(...res.result.goods_list);
          that.setData({
            goods_list: that.data.goods_list,
            page: that.data.page + 1,
            loadMore: false,
            isLoading: false,
            isShowNoMoreGoods: true,//显示没有更多数据
          })
        } else if (res.result.goods_list.length >= that.data.page_size) {
          that.data.goods_list.push(...res.result.goods_list);
          that.setData({
            goods_list: that.data.goods_list,
            page: that.data.page + 1,
            loadMore: true,
            isLoading: false,
          })
        }
      }
    })
  },
  //滚动到底部触发
  scrollToLower: function (event){
    var that = this;
    console.log(event);
    if (that.data.loadMore){
      that.loadMoreGoods();
    }else{
      that.setData({
        isShowNoMoreGoods: true,//显示没有更多数据
      })
      console.log("没有更多的数据了");
    }
  },
.no-goods{
  width:150px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -75px;
  margin-top: -75px;
  display: flex;
  justify-content: center;
}
.no-more-goods{
  display:flex;
  justify-content:center;
  padding:20px 0;
  position: relative;
}
.no-goods image{
  width: 100%;
  height: 100%;
}
.goods-scroll-view{
  position: relative;
}
.isLoading-tip{
  display:flex;
  justify-content:center;
  padding:20px 0;

}

  "usingComponents": {
        "van-loading": "../../components/VantWeapp/lib/loading/index"
  },

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值