vue中scroll 的使用

       

滚动位置固定：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll解决了这个问题。

常用效果：移动端很常见的效果，当滑动右边部分的时候，左边会联动显示与当前内容相符合的标题高亮，当点击左边某一个标题的时候，右边会自动滑动到相应的内容。

npm install better-scroll --save

import BScroll from 'better-scroll'

注意使用better-scroll的基本条件

• 必须包含两个大的div，外层和内层div
• 外层div设置可视的大小(宽或者高)-有限制宽或高
• 内层div，包裹整个可以滚动的部分
• 内层div高度一定大于外层div的宽或高，才能滚动

//创建一个新实例 并且 对class为wrapper对象 实现了一个纵向可点击的滚动效果
let scroll = new BScroll('.wrapper',{
    scrollY: true,
    click: true
})

实现及说明

1.滚动效果

better-scroll在使用的时候需要在dom元素渲染完成之后初始化better-scroll的实例，初始化的时候，先要获取需要滑动的元素，然后在初始化的时候将获取到的元素传递给初始化函数，此时便可实现滑动效果

2.左右联动效果

左右联动效果的实现，是better-scroll通过监听事件实现的。

首先获取到右边内容盒子的高度，然后获取到该盒子中每一项的高度并做前n项高度累加（第n项的高度是前n项的高度和）存储到listHeight数组中。在初始化的时候传递属性probeType=3 （探针的效果，时时获取滚动高度），并给右边的内容盒子对象监听scroll事件，从而时时获取Y轴位置，来与listHeight数组中的数据做比较，时时计算当前的索引值，并给对边对应索引值的项添加背景色高亮，从而实现右边滑动，联动左边。

当点击左边的每一项的时候，获取到当前的索引值，并根据当前的索引值获取到与右边内容盒子中对应索引的元素，右边的盒子元素通过监听scrollToElement，并传递获取到的对应索引元素和动画时间，从而实现点击左边，实现右边联动；

probeType

• 类型：Number
• 默认值：0
• 可选值：1、2、3
• 作用：有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。

             

<template>

    <div class="scroll" ref='wrapper'>

        <slot></slot>

    </div>

</template>

 

<script>

    import BScroll from 'better-scroll'

    export default {

        name: 'scroll',

        props:{

            //纵向滚动

            scrollY: {

                type: Boolean,

                default: true

            },

            //横向滚动

            scrollX:{

                type: Boolean,

                default: false

            },

            click:{

                type: Boolean,

                default: true

            },

            //探针

            probeType: {

                type: Number,

                default: 0

            }

        },

        

        //挂载后

        mounted(){

            let wrapper = this.$refs.wrapper

            this.scroll = new BScroll(wrapper,{

                scrollX:this.scrollX,

                scrollY:this.scrollY,

                click: this.click,

                probeType: this.probeType

            })

            //console.log('scroll', this.scroll)

        //  //监听滚动事件

            this.scroll.on('scroll',position => {

                //scroll组件不关心你要干嘛,只需要把你想要的信心给你,也就是派发scroll事件,如果你想获取实时的滚动位置你来监听这个事件即可,position就是实时滚动的位置,是个对象,{x: 0 ,y: 0} y是个负值

                this.$emit('scroll',position)

            })

        },

        methods:{

        //  //滚动到指定元素

            scrollToElement(...args) {

                this.scroll && this.scroll.scrollToElement(...args)

    },

        //滚动到相应的位置

           scrollTo(...args){

                  this.scroll&&this.scrollTo(...args)

          },

          //刷新

             refresh(){

                   this.scroll&&this.scroll.refresh()

           },

          //禁用

            disable(){

                  this.scroll&&this.scroll.disable()

           },

              //启用

            enble(){

this.scroll&&this.scroll.enable()

}

         }

    }

</script>

 

<style>

.scroll{ 

    overflow:hidden;

}

</style>

 

在组件中如要用到scroll,就引入.

如: import scroll from '../../base/scroll/scroll'

再在定义:components:{

          srcoll

       }

<scroll>

      <div class= 'bigBox'> 有固定的高度

                   <div class=" box"> box的高度一定要高于外边的父级盒子,才能实现滚动

                   </div>

      </div>

</scroll>

例如: