前端 mand-mobile上拉加载

<template>
  <div>
    <md-scroll-view ref="scrollView" :scrolling-x="false" @end-reached="$_onEndReached">
      <div v-for='(learn,courseCode) in arrs' :key='courseCode'>
        <div class="test">
          <div class="trainingCourse">
            <div class="learnTitle">
              <div class="courseName">{{learn.trainTitle}}</div>
              <div class="">
                <div v-if="learn.trainStatus=='WAIT_REAPPROVE'" class="states">参加中</div>
                <div v-if="learn.trainStatus=='STARTED'" class="state">已完成</div>
              </div>
            </div>
            <div class="training">
              培训班名称
              <div class="trainingCourses"> {{learn.belongComName}}</div>
            </div>
            <div class="training">
              举办时间
              <div class="holdTime">{{learn.trainStartDate}} - {{learn.trainEndDate}}</div>
            </div>
            <div class="trainings">
              培训课时
              <div class="holdTime">{{learn.period}}</div>
            </div>
          </div>
        </div>

//加载数据
      </div>
      <div v-for='learn in dataList' :key='learn.period'>
        <div class="test">
          <div class="trainingCourse">
            <div class="learnTitle">
              <div class="courseName">{{learn.trainTitle}}</div>
              <div class="">
                <div v-if="learn.trainStatus=='WAIT_REAPPROVE'" class="states">参加中</div>
                <div v-if="learn.trainStatus=='STARTED'" class="state">已完成</div>
              </div>
            </div>
            <div class="training">
              培训班名称
              <div class="trainingCourses"> {{learn.belongComName}}</div>
            </div>
            <div class="training">
              举办时间
              <div class="holdTime">{{learn.trainStartDate}} - {{learn.trainEndDate}}</div>
            </div>
            <div class="trainings">
              培训课时
              <div class="holdTime">{{learn.period}}</div>
            </div>
          </div>
        </div>
      </div>
      <md-scroll-view-more slot="more" :is-finished="isFinished">

      </md-scroll-view-more>
    </md-scroll-view>

  </div>

</template>

<script>
  // eslint-disable-next-line
  /* eslint-disable */
  import $esp from '../../../api/esp'
  import {
    ScrollView,
    ScrollViewMore
  } from 'mand-mobile'
  export default {
    name: 'learn',
    props: {
      learn: {
        required: true
      },
    },
    data() {
      return {
        isFinished: false,
        data1: {
          pageSize: 1,
          currentPage: 0,
        },
        loadNum: 5,
        allCount: 0,
        dataList: [],

      }
    },
    components: {
      [ScrollView.name]: ScrollView,
      [ScrollViewMore.name]: ScrollViewMore
    },
    methods: {
      $_onEndReached() {  
        if (this.isFinished) {
          return
        }
        this.data1.currentPage++
        console.log(this.data1.currentPage)
        $esp.userTrainList(this.data1).then(res => {
          if (res.result == 0) {
            let arr = res.trainPageListDTOs
           
           //合并数组
            this.dataList = this.dataList.concat(arr)
            //总条数
            this.allCount = res.records
            // 加载条数和页面显示条数
            this.loadNum += this.data1.pageSize
            // 判断加载条数是否大于等于数据总条数
            if (this.loadNum >= this.allCount) {
              this.isFinished = true
            }
            this.$refs.scrollView.finishLoadMore()
          }
          this.isLoading = false
        })
      },

setRem() {

//计算屏幕高度，防止页面卡顿

        let htmlHeight = document.documentElement.clientHeight || document.body.clientHeight

        let trainH = document.getElementsByClassName('menuList')[0].clientHeight

        document.getElementsByClassName('Learnss')[0].style.height = htmlHeight - trainH + 'px'

      },

    },

    computed: {
      arrs: {
        get: function () {
          return this.learn
        },
        set: function () {
          return this.learn
        }

      }

    },

    mounted() {
      // let arr = this.arrs
      // arr.map((value, index) => {
      //   list = this.list

      // })
    },

this.setRem()

  }
</script>
<style lang="less" scoped>
  .test {
    width: 6.7rem;

    margin: auto;
    margin-bottom: .32rem;
    font-weight: 400;
    color: rgba(22, 38, 65, 1);
    line-height: .4rem;
    font-size: .28rem;
    border-bottom: 1px solid rgba(235, 235, 235, 1);

    .trainingCourse {}

    .learnTitle {
      display: flex;
      justify-content: space-between;
      margin-bottom: .24rem;
    }

    .courseName {
      width: 5.6rem;
      height: .42rem;
      font-size: .3rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(22, 38, 65, 1);
      line-height: .42rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      align-items: center;
    }

    .state {
      font-size: .26rem;
      font-weight: 400;

      color: rgba(114, 125, 139, 1);
    }

    .states {
      font-size: .26rem;
      font-weight: 400;
      color: rgba(243, 60, 42, 1);
    }

    .training {
      color: rgba(114, 125, 139, 1);
      font-size: .28rem;
      display: flex;
      margin-bottom: .26rem;
    }

    .trainings {
      color: rgba(114, 125, 139, 1);
      font-size: .28rem;
      display: flex;
      margin-bottom: .33rem;
    }

    .trainingCourses {
      margin-left: .33rem;
      font-size: .3rem;
      font-weight: 400;
      color: rgba(22, 38, 65, 1);
    }

    .holdTime {
      margin-left: .66rem;
      font-size: .3rem;
      font-weight: 400;
      color: rgba(22, 38, 65, 1);
    }

  }
</style>
this.$nextlick  等数据加载完才回关闭
this.$forceUpdate() 强制组件刷新
this.$store.commit('GLOBALMASK_CLOSE')  关闭遮罩
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // 数组合并
ref加到标签表示DOM对象
ref属性加给组件表示该组件的实例对象