自定义滚动better-scroll

自定义滚动better-scroll

第一、安装better-scroll插件

npm install better-scroll --save

第二、指定滚动组件

<template>
    <div ref="area_scroll">
        <ul>
           <li>这一个不可思议的哦</li>
           <li>这一个不可思议的哦</li>
           <li>这一个不可思议的哦</li>
           ....
        </ul>
    </div>
</template>

<script>
    //引用scroll插件
    import BetScroll from 'better-scroll'
    export default {
       mounted() {
            //滚动实例化
            new BetScroll(this.$refs.area_scroll, {
                click: true
            });
            
        },
    }
</script>

第三、指定滚动位置

scrollToElement(el,1000)

<template>
    <div ref="area_scroll">
        <ul>
           <li class="showLi">这一个不可思议的哦</li>
           <li class="showLi">这一个不可思议的哦</li>
           <li class="showLi">这一个不可思议的哦</li>
           ....
        </ul>
        <button @click="goto(2)">跳转到第3个li</butto>
    </div>
</template>

<script>
    //引用scroll插件
    import BetScroll from 'better-scroll'
    export default {
        data(){
            main_scroll:null
        },
        mounted() {
            this.main_scroll:null  = new BetScroll(this.$refs.area_scroll, {
                click: true
            });
        },
        methods:{
             goto(index){
                 //获取所有滚动元素
                 const all_li = this.$refs.area_scroll.getElementsByClassName('showLi');
                 //根据下标index，获取相对应的元素
                 let el = all_li[index];
                 //滚动到指定位置
                 this.main_scroll.scrollToElement(el,500);
             }
        }
    }
</script>