标签：better Vue 滚动 probeType scrollTo scroll 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>

标签：better,Vue,滚动,probeType,scrollTo,scroll,Better,Scroll
来源： https://blog.csdn.net/qq_45118257/article/details/116722016

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。