小程序-实现上拉加载

最新推荐文章于 2024-05-31 15:32:03 发布

赵星星001

最新推荐文章于 2024-05-31 15:32:03 发布

阅读量78

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/zhaosisi0922/article/details/133681142

版权

直接上代码

<scroll-view wx:if='{{dataList.length}}' style="height: {{windowHeight}}px;" scroll-y data="dataList" bindscrolltolower="loadMore" class="scroll_list_box ">
        <view class='listinfo' wx:for='{{dataList}}' data-index="{{item.id}}" wx:key="id">
                <view class="padding_20">
                    <view class='second_info_box'>
                        <view class="one_box">吴昕</view>
                        <view class="two_box">
                            <text>{{item.warehouseName || '--'}}</text>
                        </view>
                    </view>
                    <view class='second_info_box '>
                        <view class="one_box">赵武</view>
                        <view class="two_box">
                            <text>{{item.outboundDate  || '--'}}</text>
                        </view>
                    </view>
                    <view class='second_info_box '>
                        <view class="one_box">李四</view>
                        <view class="two_box">
                            <text>{{item.accessoryNames || '--'}}</text>
                        </view>
                    </view>
                    <view class='second_info_box '>
                        <view class="one_box">张三</view>
                        <view class="two_box">
                            <text>{{item.automobileNames || '--'}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
 <!-- 暂无数据 -->
    <view wx:if='{{!dataList.length}}' class="no_list">
        <image class='imgae_no' src='xx.png'></image>
        <view class="no_list_text">暂无数据</view>
    </view>

Page({
  data: {
    windowHeight: wx.getSystemInfoSync().windowHeight,//页面高度
    //列表数据项
    dataList:[],
    isLoadOver:false,//是否加载到底部标识
    searchObj:{
      current: 1,
      size: 10,
    }
  },
  //列表
  async  queryDataList(){
    wx.showLoading({title: '加载中'})
    const {data,code,message} = await list(this.data.searchObj)
    wx.hideLoading();
    if(code == 200){
        //判断是否加载到最后一页
        if(data.list.length<this.data.searchObj.size){
          this.data.isLoadOver = true
        }else{
          this.data.isLoadOver = false
        }
        //页面数据赋值
        this.data.dataList = this.data.dataList.concat(data.list)
        this.setData({
            dataList:this.data.dataList,
            isLoadOver:this.data.isLoadOver
        });
    }else{
        wx.showToast({ title: message, icon: 'none', duration: 2000,mask:true});
    }
  },

  //加载更多
  loadMore() {
    if(!this.data.isLoadOver){
      this.data.searchObj.current = this.data.searchObj.current + 1;
      this.queryDataList();
    }
  },
})