基于Vue的Better-Scroll组件封装

基于Vue的Better-Scroll组件封装

介绍：在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，可以是竖向滚动的列表，也可以是横向的，用better-scroll可以帮助我们实现这个。

Scroll组件

• Better-Scroll

<template>
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>

    </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
BScroll.use(Pullup)
export default {
    props: {
        top: {
            type: Number,
            default: 0
        },
        // list: {
        //     type: Array,
        //     required: true
        // },
        probeType:{
            type:Number,
            default: 0
        },
        pullUpLoad:{
            type:Boolean,
            default: false
        }
    },
    data(){
        return{
            scroll:null
        }
    },
    methods: {
        finishPullUp(){
            this.scroll && this.scroll.finishPullUp();
        },
        refresh() {
            this.scroll && this.scroll.refresh();
            // console.log('==========')
        },
        scrollTo(x,y,time=300){
            this.scroll.scrollTo(x,y,time)
        }
    },
    mounted() {
        this.$refs.wrapper.style.top = this.top + 'px';
        this.scroll = new BScroll(this.$refs.wrapper, {
            click: true,
            probeType:this.probeType,
            pullUpLoad: this.pullUpLoad,
        });
        //监听滚动的位置
        if(this.probeType === 2 || this.probeType === 3){
            this.scroll.on('scroll',(position)=>{
                this.$emit('scroll',position)
            })
        }

    //    监听上拉加载事件
        if (this.pullUpLoad){
            this.scroll.on('pullingUp',()=>{
                this.$emit('pullingUp')
            })
        }



    },
    // watch: {
    //     list() {
    //         this.$nextTick(() => {
    //             this.refresh();
    //         })
    //     }
    // }
}
</script>

<style>
.wrapper {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style>

probeType

• 作用：决定是否派发 scroll 事件，对页面的性能有影响，尤其是在 useTransition 为 true 的模式下。
• 类型：number
• 默认值：0
• 可选值：1|2|3

// 派发 scroll 的场景分为两种：
// 1. 手指作用在滚动区域（content DOM）上;
// 2. 调用 scrollTo 方法或者触发 momentum 滚动动画（其实底层还是调用 scrollTo 方法）

// 1. probeType 为 0，在任何时候都不派发 scroll 事件，
// 2. probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
// 3. probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
// 4. probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画

finishPullUp()

• 作用：当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。

refresh()

• 作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。

scrollTo(x,y,time)

• 作用： 滚动到指定的位置;

Scroll组件的使用

• 导入

	import Scroll from "@/components/common/Scroll/Scroll";

• 注册组件
  components：{Scroll }
• 使用组件

 <scroll :top="44"
                ref="BScroll"
                :probe-type="3"
                @scroll="contentScroll"
                :pull-up-load="true"
                @pullingUp="loadMore">
<!--            要滚动的组件-->
        </scroll>