提交上拉加载

马宇豪

2023-08-01 419ad623db22db5fa34e88ab771d2161fe12e920

 pages/tabBar/response/response.vue

@@ -9,8 +9,13 @@
            <view class="barText">叫应记录</view>
         </view>
      </view>
    <div v-if="loading" style='display: flex;justify-content: center;position: absolute;width:100%;top: 40%;left: 0'>
      <u-loading-icon></u-loading-icon>
    </div>
      <!-- 页面内容 -->
      <view class="responseList" v-if="responseList.length > 0">
<!--      <view class="responseList" v-if="responseList.length > 0">-->
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="responseList" @scrolltoupper="upper" v-if="responseList.length > 0"
                 @scrolltolower="lower" @scroll="scroll" lower-threshold="50">
         <view v-for="(item, index) in responseList" :key="index" class="itemContent">
            <view class="timeLeft">
               <text>{{item.time}}</text>
@@ -21,7 +26,9 @@
               <text style="color: rgb(76, 197, 248);" @click="toDetail(item)">[查看信息详情]</text>
            </view>
         </view>
      </view>
    </scroll-view>
<!--      </view>-->

      <view v-else>
         <u-empty
            mode="data"
@@ -44,8 +51,11 @@
         return {
            data: {
               pageIndex: 1,
               pageSize: 10000000
               pageSize: 10
            },
        total: 0,
        scrollTop: 0,
        loading: false,
            // 状态栏高度
            statusBarHeight: 0,
            responseList: [],
@@ -53,6 +63,7 @@
         }
      },
      onShow () {
      this.data.pageIndex = 1
         this.getResponseList();
      },
      onLoad() {
@@ -62,10 +73,16 @@
      },
      methods: {
         getResponseList() {
        this.loading = true
            getResponse(this.data).then(res => {
               console.log("res",res);
               if (res.code === 100) {
                  this.responseList = res.data ? res.data : [];
                  let list = res.data ? res.data : [];
            if (res.pageIndex != 1) {
              this.responseList = this.responseList.concat(list)
            } else {
              this.responseList = list;
            }
            this.total = res.total
                  if (this.responseList.length > 0) {
                     this.responseList.forEach((item, index) => {
                        this.responseList[index].time = item.responseTime.substring(0,10);
@@ -74,8 +91,10 @@
                     })
                  }
               }else {
            uni.$u.toast(res.msg)
                  this.responseList = [];
               }
          this.loading = false
            }).catch(err=>{})
         },
         toDetail(item) {
@@ -97,6 +116,23 @@
               this.getResponseList();
            }, 1000);
         },

      upper: function(e) {
        // console.log(e)
      },
      lower: function(e) {
        if (this.data.pageIndex * this.data.pageSize >= this.total){
          uni.$u.toast('已加载全部数据')
          return
        }
        //并且让页码+1,调用获取数据的方法获取第二页数据
        this.data.pageIndex++
        //此处调用自己获取数据列表的方法
        this.getResponseList()
      },
      scroll: function(e) {
        // console.log(e)
      },
      }
   }
</script>
@@ -133,11 +169,12 @@
.responseList{
  display: flex;
  flex-direction: column;
  margin: 0 12px;
  width: calc(100% - 24px);
  height: calc(100vh - 124px);
  margin: 12px 12px 0;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  margin-top: 12px;
}
.itemContent{
  display: flex;