vue自定義指令v-load-more實現上拉加載

vue通過自定義指令實現loadMore上拉加載，實現方法：

common.js

/**
 * 獲取style樣式
 */
export const getStyle = (element, attr, NumberMode = 'int') => {
        let target;
        // scrollTop 獲取方式不同，沒有它不屬於style，而且只有document.body才能用
        if (attr === 'scrollTop') {
            target = element.scrollTop;
        } else if (element.currentStyle) {
            target = element.currentStyle[attr];
        } else {
            target = document.defaultView.getComputedStyle(element, null)[attr];
        }
        //在獲取 opactiy 時需要獲取小數 parseFloat
        return NumberMode == 'float' ? parseFloat(target) : parseInt(target);
    }

mixmin.js

import { getStyle } from './common'
export const loadMore = {
    directives: { 
        'load-more': {
            bind: (el, binding) => { //只調用一次，指令第一次綁定到元素時調用
                let windowHeight = window.screen.height;
                let height;
                let setTop;
                let paddingBottom;
                let marginBottom;
                let requestFram;
                let oldScrollTop;
                let scrollEl;
                let heightEl;
                let scrollType = el.attributes.type && el.attributes.type.value; //獲取元素的屬性是獲取的對象而非數組
                let scrollReduce = 2;
                if (scrollType == 2) {
                    scrollEl = el;
                    heightEl = el.children[0];
                } else {
                    scrollEl = document.body;
                    heightEl = el;
                }

                el.addEventListener('touchstart', () => {
                    height = heightEl.clientHeight;
                    if (scrollType == 2) {
                        height = height
                    }
                    setTop = el.offsetTop;
                    paddingBottom = getStyle(el, 'paddingBottom');
                    marginBottom = getStyle(el, 'marginBottom');
                }, false)

                el.addEventListener('touchmove', () => {
                    loadMore();
                }, false)

                el.addEventListener('touchend', () => {
                    oldScrollTop = scrollEl.scrollTop;
                    moveEnd();
                }, false)

                const moveEnd = () => {
                    requestFram = requestAnimationFrame(() => {
                        if (scrollEl.scrollTop != oldScrollTop) {
                            oldScrollTop = scrollEl.scrollTop;
                            moveEnd()
                        } else {
                            cancelAnimationFrame(requestFram);
                            height = heightEl.clientHeight;
                            loadMore();
                        }
                    })
                }

                const loadMore = () => {
                    if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
                        binding.value();
                    }
                }
            }
        }
    }
};

loadMore.vue

<template>
  <div class="my_order">
    <ul v-load-more="loaderMore" type="1">
      <li class="order"  v-for="(orderListAll,index) in ordersAll" :key="index">

      </li>
      <li class="more_loading" v-if="touchend">無更多</li>
    </ul>
  </div>
</template>
<script>
  import {
    loadMore
  } from '../javascript/mixin.js'
  import {
    getOrders
  } from '../api/index.js';
  export default {
    name: 'orders',
    mixins: [loadMore],
    data() {
      return {
        orderParams: {
          memberid: uid, //會員id
          pagenum: 1, //頁碼
          pagesize: '20' //每頁條數
        },
        ordersAll: [],
        preventRepeatReuqest: false, //到達底部加載數據，防止重複加載
        touchend: false, //沒有更多數據
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      async initData() {
        try {
          let res = await getOrders(this.orderParams);
          this.ordersAll = res.data.orderInfolist;
          if (res.data.orderInfolist.length < 20) {
            this.touchend = true;
          }
        } catch (err) {

        }
      },
      async loaderMore() {
        if (this.touchend) {
          return
        } //防止重複請求 
        if (this.preventRepeatReuqest) {
          return
        }
        this.preventRepeatReuqest = true;
        this.orderParams.pagenum += 1;
        try {
          let res = await getOrders(this.orderParams);
          this.ordersAll = [...this.ordersAll, ...res.data.orderInfolist];
          if (res.data.orderInfolist.length < 20) {
            this.touchend = true;
            return
          }
          this.preventRepeatReuqest = false;
        } catch (err) {

        }
      },
 
    },

  }

</script>
<style lang="" scoped>
    .my_order{
        width:100%;
    }
</style>