vue中使用better-scroll封装scroll组件

<template>
    <!-- 封装滚动组件 -->
    <div class="wrapper" ref="swiper">
        <!-- wrapper里面只能放一个元素，就是滚动的 -->
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
    name: "Scroll",
    props: {
        probeType: {
            type: Number,
            default() {
                //默认是0， 不监听滚动
                return 0;
            }
        }
    },
    data() {
        return {
            scroll: null
        };
    },
    mounted() {
        this.scroll = new BScroll(this.$refs.swiper, {
            click: true,
            probeType: this.probeType
        });
        //监听滚动的位置;
        this.scroll.on("scroll", position => {
            console.log(position);
            this.$emit("scroll", position);
        });
        //监听上拉加载事件
        //    this.scroll.on('pullingUp',()=>{
        //        //发射一个自定义事件
        //        this.$emit('pullingUp');
        //    });
    },
    methods: {
        //返回顶部
        scrollTop(x, y, time = 300) {
            //给它在外面做一层封装, 给它设置一个默认的滚动时间，300毫秒;
            this.scroll.scrollTo(x, y, time);
        },
        //每当图片加载完成后，重新计算可滚动的区域
        refresh() {
            this.scroll && this.scroll.refresh();
            // 因为this.scroll是写在mounted中
            //怕存在 还没有值的情况就调用函数;
            //意思是只有当 this.scroll 创建完成后 才会执行 this.scroll.refresh()
        },
        //当上拉加载事件完成后，调用此方法，才可以进行下一次上拉加载;
        finishPullUp() {
            this.scroll && this.scroll.finishPullUp();
        }
    }
};
</script>

<style lang="less">
.wrapper {
    height: calc(
        100vh - 96px
    ); //切记使用 calc 的时候，里面的 - 左右两边一定要有个空格，快被这个bug搞死了;
    background-color: #fff;
    overflow: hidden;
    margin-top: 46px;
}
</style>
 
posted @ 2020-06-17 23:00  岱宗如何  阅读(861)  评论(0)  编辑  收藏  举报