小程序上拉加载数据

 

<scroll-view class="autoMe-box_sroll" scroll-y="true" @scrolltolower="scrolltolower">
     <template v-if="viewModel && viewModel.length > 0">
        <view v-for="(row, rowIndex) in viewModel" :key="rowIndex">
          <data :row="row"></data>
        </view>
    </template>
    <x-nodata v-else></x-nodata>
</scroll-view>    

import data from './data.vue'

onLoad() {
    this.query.type = 1
}

methods: {
    async init() {
      var response = await get(接口', this.query)
      this.query.pageIndex = response.pageIndex
      this.query.pageCount = response.pageCount
      if (response.pageIndex === 1) {
        this.viewModel = response.rows
      } else {
        this.viewModel = [...this.viewModel, ...response.rows]
      }
    },
    async scrolltolower() {
        if (this.query.pageCount > this.query.pageIndex) {
            this.query.pageIndex++
            this.init()
        }
    }  
}

<style lang="scss">
.autoMe-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  &_sroll {
    background: #00000005;
    flex: 1;
    min-height: 0;
    padding-left: 30rpx;
  }
}
</style>

　　

<view class="auto-me-style1">
    <view class="auto-me-style1_box" @click="to('/views/auto/preview?key=user&id=' + row.id)">
      <view class="auto-me-style1-p1">
        <x-image :src="row.avatar" height="42px" width="42px" radius="42px"></x-image>
      </view>
      <view class="auto-me-style1-p2">
        <view class="auto-me-style1-p2_left">
          <view class="auto-me-style1-p2_li">
            <text class="auto-me-style1-p2_title" v-if="row.mobile">
              {{ row.userName }} {{ row.name }}
              {{
                (row.mobile).replace(/(\d{3})\d{4}(\d{4})/, '$1*****$2') }}
              {{
                row.gradeIdVo.name }}
              </text>
          </view>
          <view class="auto-me-style1-p2_li">
            <text class="auto-me-style1-p2_couplet" v-if="row.createTime">{{ row.createTime }}</text>
          </view>
        </view>
        <text class="auto-me-style1-p2_num">{{ row.gradeName }}</text>
      </view>
    </view>
  </view>

<style lang="scss">
.auto-me-style1 {
  width: 90%;
  background-color: #ffffff;
  margin-top: 20rpx;
  border-radius: 10rpx;
  padding: 10rpx 0 0 20rpx;

  &_box {
    padding: 16rpx 30rpx 30rpx 0;
    // @include border-bottom;
    display: flex;
    flex-direction: row;
  }

  &-p1 {
    border-radius: 50%;
    @include border;
    @include flexRowCenterCenter;
    width: 42px;
    height: 42px;
  }

  &-p2 {
    flex: 1;
    padding-left: 20rpx;
    @include font($gl-text3, $gl-12);
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &_left {
      width: 430rpx;
      margin-right: 10rpx;
      overflow: hidden;
    }

    &_title {
      @include font($gl-text1, $gl-16);
    }

    &_num {
      width: 140rpx;
      text-align: right;
      @include onlyLineEllipsis;
      @include font($gl-text-num, $gl-14);
    }

    &_li {
      @include flexRowWrap;
    }

    &_glin {
      margin: 0 10rpx;
    }

    &_line {
      margin-right: 10rpx;
      @include font($gl-text3, $gl-12);
      @include onlyLineEllipsis;
      margin-top: 4rpx;
    }

    &_couplet {
      margin-right: 10rpx;
      @include font($gl-text3, $gl-12);
      margin-top: 4rpx;
      @include moreLineEllipsis;
    }
  }
}
</style>