自定义滚动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>