vue使用better-scroll導航滾動的指定位置
阿新 • • 發佈:2018-12-25
思路:
- 主要是通過better-scroll的scrollToElement()方法來實現的
import BScroll from 'better-scroll';
template:
<div class="tab" ref="tab"> <ul ref="tabWrapper" class="ultab"> <li :class="{red: item.id === active}" v-for="item in tabList" :key="item.id" @click="clickTab(item.id)" ref="tabitem"> <span>{{item.name}}</span> </li> </ul> </div>
data
tabList: [{ id: '', name: "全部" }, { id: 0, name: "待接單" }, { id: 1, name: "待發貨" }, { id: 2, name: "待收貨" }, { id: 3, name: "已完成" }, { id: 4, name: "已取消" }, ],
mounted:
this.$nextTick(() => {
this.InitTabScroll();
let a = document.querySelector(".ultab .red")
console.log(a);
this.scroll.scrollToElement(a, 0, 0)
});
methods:
InitTabScroll() { let width = 0 for (let i = 0; i < this.tabList.length; i++) { width += this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相對於視口的位置 } this.$refs.tabWrapper.style.width = width + 'px'; this.scroll = new BScroll(this.$refs.tab, { startX: 0, click: true, scrollX: true, scrollY: false, bounce: false, eventPassthrough: 'vertical' }); },