vue 组件系列-dataloading

//  referenced: https://github.com/bedlate/vue-data-loading

<template>
    <div class="vue-data-loading">
        <div class="loading-header" :style="{height: pullHeight + 'px'}" v-show="PULL_DOWN === pull.type">
            <div class="header-text" v-show="!pull.available">
                <slot :name="PULL_DOWN + '-before'">下拉刷新数据</slot>
            </div>
            <div class="header-text" v-show="pull.available && PULL_DOWN !== loadingType">
                <slot :name="PULL_DOWN + '-ready'">松开刷新数据</slot>
            </div>
            <div class="header-text" v-show="PULL_DOWN === loadingType">
                <slot :name="PULL_DOWN + '-loading'">刷新中...</slot>
            </div>
        </div>

        <div class="loading-content">
            <slot></slot>
        </div>

        <div class="loading-footer" :style="{height: pullHeight + 'px'}" v-show="PULL_UP === pull.type">
            <div class="footer-text" v-show="!pull.available">
                <slot :name="PULL_UP + '-before'">上拉加载数据</slot>
            </div>
            <div class="footer-text" v-show="pull.available && PULL_UP !== loadingType">
                <slot :name="PULL_UP + '-ready'">松开加载数据</slot>
            </div>
            <div class="footer-text" v-show="PULL_UP === loadingType">
                <slot :name="PULL_UP + '-loading'">加载中...</slot>
            </div>
        </div>

        <transition name="fade">
          <div class="loading-footer" v-show="loading && INFINITE_SCROLL === loadingType">
              <div class="footer-text">
                  <slot :name="INFINITE_SCROLL + '-loading'">加载中...</slot>
              </div>
          </div>
        </transition>

        <div class="loading-footer" v-show="!loading && completed">
            <div class="footer-text">
                <slot name="completed">加载完毕</slot>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        props: {
            loading: {
                type: Boolean,
                default: false
            },
            completed: {
                type: Boolean,
                default: false
            },
            distance: {
                type: Number,
                default: 60
            },
            offset: {
                type: Number,
                default: 0
            },
            listens: {
                type: Array,
                default() {
                    return ['infinite-scroll', 'pull-down', 'pull-up']
                }
            },
            container: {
                type: String,
            },
            initScroll: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                margin: {
                    top: 0,
                    bottom: 0,
                },
                pull: {
                    from: -1,
                    to: -1,
                    distance: 0,
                    type: null,
                    available: false,
                },
                loadingType: null,

                PULL_UP: 'pull-up',
                PULL_DOWN: 'pull-down',
                INFINITE_SCROLL: 'infinite-scroll',
            }
        },
        computed: {
            _container() {
                return this.container ? this.$parent.$refs[this.container] : window.window
            },
            pullHeight() {
                return this.pull.distance > this.distance ? this.distance : this.pull.distance
            },
        },
        watch: {
            loading(val, oldVal) {
                if (oldVal && !val) {
                    this.resetPull()
                    this.setLoadingType()
                }
            }
        },
        methods: {
            updateView() {
                let {top, height} = this.$el.getBoundingClientRect()
                this.margin = {
                    top,
                    bottom: window.innerHeight - (height + top + this.offset)
                }
            },
            setLoadingType(type = null) {
                this.loadingType = type
            },
            handleScroll() {
                this.updateView()
                if (this.loading || this.completed) {
                    return
                }
                if (this.margin.bottom >= 0) {
                    this.$emit(this.INFINITE_SCROLL)
                    this.setLoadingType(this.INFINITE_SCROLL)
                }
            },
            handleTouchStart(e) {
                if (this.loading || !(this.hasListen(this.PULL_UP) || this.hasListen(this.PULL_DOWN)) || (this.margin.top < 0 && this.margin.bottom < 0)) {
                    return
                }

                this.pull.from = e.touches.item(0).pageY
            },
            handleTouchMove(e) {
                if (this.loading || this.pull.from < 0) {
                    return
                }
                this.pull.to = e.touches.item(0).pageY
                let distance = this.pull.to - this.pull.from

                if (distance > 0 && this.margin.top >0 && this.hasListen(this.PULL_DOWN)) {   // pull down
                    this.pull.type = this.PULL_DOWN
                } else if (distance < 0 && this.margin.bottom > 0 && this.hasListen(this.PULL_UP)) {    // pull up
                    this.pull.type = this.PULL_UP
                } else {
                    this.pull.type = null
                }

                this.pull.distance = Math.abs(distance)
                this.pull.available = this.pull.distance >= this.distance
            },
            handleTouchEnd() {
                if (this.pull.distance >= this.distance) {
                    if (this.PULL_UP === this.pull.type || this.PULL_DOWN === this.pull.type) {
                        this.$emit(this.pull.type)
                        this.setLoadingType(this.pull.type)
                    }
                } else {
                    this.resetPull()
                }
            },
            resetPull() {
                this.pull = {
                    from: -1,
                    to: -1,
                    distance: 0,
                    type: null,
                    available: false,
                }
            },
            bindEvents() {
                // scroll
                if (this.hasListen(this.INFINITE_SCROLL)) {
                    ['scroll', 'resize'].forEach(e => {
                        this._container.addEventListener(e, this.handleScroll)
                    })
                }

                // touch
                if (this.hasListen(this.PULL_UP) || this.hasListen(this.PULL_DOWN)) {
                    this._container.addEventListener('touchstart', this.handleTouchStart)
                    this._container.addEventListener('touchmove', this.handleTouchMove)
                    this._container.addEventListener('touchend', this.handleTouchEnd)
                }
            },
            hasListen(event) {
                return this.listens.indexOf(event) >= 0
            },
            init() {
                this.bindEvents()
                this.updateView()
                if (this.initScroll) {
                    this.handleScroll()
                }
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
    }
</script>