基於Vue2實現的上拉加載之移動端

上拉加載需求相信很多做移動端的同學基本都有遇到，當然PC端也是家常便飯。目前項目基本接近尾聲，前后端聯調、真機測試都ok,話說項目需求文檔其實並沒有說要實現上拉加載功能，但是我們領導說這個可以有，可以成為一個小亮點。然后就這么愉快的決定了（冷冷的冰雨在我臉上胡亂的拍 233333333333.。。。）好了，廢話不多扯，奔入今天的主題吧！

接下來就是一坨坨的代碼了。。。

<template>
  <div class="scroll-loadmore"
       @touchstart="touchStart($event)"
       @touchmove="touchMove($event)"
       @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
    <section class="inner">
      <slot></slot>
      <footer class="load-more">
        <slot name="load-more">
          <vue-loading v-if="loading" type="spin" color="rgba(0,0,0,0.4)" :size="{ width: '30px', height: '30px' }"></vue-loading>
          <span v-else>{{loadingText}}</span>
        </slot>
      </footer>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  import vueLoading from 'vue-loading-template';
  export default {
    props: {
      offset: {
        type: Number,
        default: 30
      },
      onInfinite: {
        type: Function,
        default: undefined,
        require: false
      },
      loadingText: {
        type: String
      },
      loading: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        startY: 0,
        startScroll: 0,
        infiniteLoading: false
      };
    },
    methods: {
      touchStart (e) {
        this.startY = e.targetTouches[0].pageY;
        this.startScroll = this.$el.scrollTop || 0;
      },
      touchMove (e) {
        if (this.$el.scrollTop > 0) {
          return;
        }
        let diff = e.targetTouches[0].pageY - this.startY - this.startScroll;
        if (diff > 0) e.preventDefault();
      },
      infinite () {
        this.infiniteLoading = true;
        this.onInfinite(this.infiniteDone);
      },

      infiniteDone () {
        this.infiniteLoading = false;
      },

      onScroll () {
        if (this.infiniteLoading) {
          return;
        }
        let outerHeight = this.$el.clientHeight;
        let innerHeight = this.$el.querySelector('.inner').clientHeight;
        let scrollTop = this.$el.scrollTop;
        let infiniteHeight = this.$el.querySelector('.load-more').clientHeight;
        let bottom = innerHeight - outerHeight - scrollTop;
        if (bottom < infiniteHeight) this.infinite();
      }
    },
    components: {
      vueLoading
    }
  };
</script>

<style>
  .scroll-loadmore {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #f4f4f4;
  }

  .scroll-loadmore .inner {
    position: absolute;
    top: 0;
    width: 100%;
    transition-duration: 300ms;
  }

  .scroll-loadmore .load-more {
    height: 1rem;
    font-size: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

把上面的代碼直接保存到一個load-more組件里面。當然組件名字隨便命名。接下來就是在你需要實現上拉加載的組件里引用它。代碼如下↓

<template>
  <div>
    <load-more :on-infinite="onInfinite"
               :loading-text="loadingText"
               :loading="loading"
               v-if="returnCode === '0000'">
      <div>
        <history-detail-list :message="item" v-for="item in downdata"></history-detail-list>
      </div>
    </load-more>
    <load-more class="appointmentListEmpty" :loading="loading" v-else>
      <div class="listnull"></div>
      <div class="marginTop10 color909090">
        {{desc}}
      </div>
    </load-more>
    <err-msg v-if="modal"></err-msg>
  </div>
</template>

<script type="text/ecmascript-6">
  import loadMore from 'common/loadmore/loadmore';
  import errMsg from 'common/err_msg/err_msg';
  import historyDetailList from 'components/history_detail_list/history_detail_list';
  import { mapGetters } from 'vuex';
  const ERR_OK = 200;
  export default {
    data () {
      return {
        num: '5',  // 一次顯示多少條
        pageNo: 1, // 開始頁數
        loadingText: '',
        loading: false,
        downdata: [], // 上拉更多的數據存放數組
        returnCode: '',
        desc: '',
        modal: false
      };
    },
    methods: {
      onInfinite (done) {
        this.loading = true;
        var formdata = {
          'UserID': this.clientInfomation.user_id,
          'PageNo': this.pageNo,
          'Num': this.num
        };
        this.$axios({
          method: 'post',
          url: '請求的后端接口地址',
          timeout: 超時時間,
          data: formdata
        }).then(response => {
          if (response.status === ERR_OK) {
            if (response.data.Head.ReturnCode === '0000') {
              this.returnCode = response.data.Head.ReturnCode;
              let arr = response.data.Body.RsList;
              this.downdata = this.downdata.concat(arr);
              this.pageNo += 1;
              if (this.num >= arr.length) {
                this.loading = false;
                this.loadingText = '沒有更多了';
                return;
              }
            } else if (response.data.Head.ReturnCode !== '2001' && response.data.Head.ReturnCode !== '0000') {
              this.desc = response.data.Head.Desc;
              this.loading = false;
            } else {
              this.modal = true;
            }
          }
          done();
        }).catch(() => {
          if (done) {
            this.$Message.config({
              top: 50,
              duration: 2
            });
            this.$Message.error('請求超時，請重試');
            this.$router.push({path: '/myAppointment'});
          }
        });
      }
    },
    components: {
      loadMore,
      errMsg,
      'history-detail-list': historyDetailList
    },
    computed: {
      ...mapGetters(['clientInfomation'])
    },
    created () {
      this.onInfinite(); 99     }
  };
</script>

<style rel="stylesheet/less" lang="less" scoped>
  @import '../../common/less/reset.less';

  .appointmentListEmpty {
    text-align: center;
    vertical-align: middle;
    .fs(32);
    margin-top: 50%;
    .line-height(50);
    .listnull {
      .w(267);
      .h(283);
      background: url('../../common/img/listnull.png') no-repeat center center;
      .background-size(267, 283);
      margin: 0 auto;
      .mt(100);
    }
  }
</style>

趕快把代碼復制到你的項目下跑起來吧，時間充裕可以看看抽離出來的load-more組件代碼，歡迎一起交流學習，有問題和Bug歡迎留言提issure。最后順便說一句，下拉刷新本項目沒有開發，其實這個都是一套的，有時間再完善咯!