better-scroll的下拉刷新/上拉加载

1、先上效果如

image.png

采用vux框架以及better-scroll插件

<template>
    <div class="layout">
        <x-header class="v-header" :title="isTitle" :left-options="{backText : ''}"></x-header>
        <div class="v-wapper" ref="BSwapper">
            <div class="wapper-content" ref="BScotnent">
                <div class="v-spinner">
                    <spinner v-if="statsT == 1"></spinner>
                    <span v-else>↓</span>
                </div>
                <slot name="v-content"></slot>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
import {XHeader,Spinner} from 'vux';
export default{
    data(){
        return {
            statsT : 0 // 0还没下拉 1 下拉中
        }
    },
    props : {
        isTitle : {
            type : String,
            default : '标题'
        },
        bounceB : { //底部回弹
            type : Boolean,
            default : true
        },
        bounceT : { //顶部回弹
            type : Boolean,
            default : true
        }
    },
    mounted() {
        setTimeout(()=>{
            this.initScroll()
        },20)
    },
    methods : {
        initScroll(){
            if (!this.$refs.BSwapper) {
                return;
            }
            let innerH = document.documentElement.clientHeight;
                //减掉导航栏的高度
            this.$refs.BSwapper.style.height = innerH - 46 + 'px';
                //不管内容是否充满页面 保持可以下拉
            this.$refs.BScotnent.style.minHeight = innerH - 45.5 + 'px';

            this.scroll = new BScroll(this.$refs.BSwapper,{
                click : true,
                bounce : {
                    bottom : this.bounceB,
                    top : this.bounceT
                },
                pullDownRefresh : {
                    threshold : 50,
                    stop : 50
                }
            })

            //下拉刷新滚动事件
            this.scroll.on('touchEnd',(pos)=>{

                if(pos.y > 50){
                    this.statsT = 1;
                }
            })
            //加载数据 参数是函数 当数据加载完成后 应当调用此函数关闭下拉状态
            this.scroll.on('pullingDown',()=>{
                this.$emit('pullDown',()=>{
                    setTimeout(()=>{
                        this._closePullDown()
                    },1000)
                })
            })

        },
        _closePullDown(){
            this.statsT = 0;
            this.scroll && this.scroll.finishPullDown()
        }
    },
    components : {
        Spinner,
        XHeader
    }
}
</script>

<style lang="less">
.v-header{
    .vux-header-title{
        color: #000 !important;
    }
    .left-arrow{
        &:before{
            border-color: #000 !important;
        }
    }
}
.v-wapper{
    overflow: hidden;
    position: relative;
    .v-spinner{
        position: absolute;
        top: -50px;
        width: 100%;
        text-align: center;
    }
}
</style>

目前只有下拉刷新，保持更新上拉加载;