1.通过v-for将右侧内容渲染出来,并绝对定位到右侧
2.给每个li绑定touchStart事件,并绑定自定义属性data-index=index;
3.点击每个li,通过e来获取所绑定的自定义属性中的index;
4.封装scrll中的scrllTo和scrollTlElement方法,
5.给滚动盒子加:ref="listview",里面变化的绑定:ref=listGroup;
6.让listGroup滚动到点击的锚点索引anchorIndex;
代码如下:
//滚动事件封装:
scrollTo() {//封装滚动
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
//使用apply是因为这个scrollTo方法会接收一些参数的,我们要把这些参数传递到better-scroll的scroll里面,
},
scrollToElement() {//滚动到某个元素
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
//自定义属性获取:dom.js
export function getData(el, name, val) {//该方法是用来获取data-自定义属性的
const prefix = 'data-'
if (val) {
return el.setAttribute(prefix + name, val)
}
return el.getAttribute(prefix + name)
}
//listview.vue中touchStart事件
onShortcutTouchStart(e){
let anchorIndex = getData(e.target, 'index')
this.$refs.listview.scrollToElement(this.$refs.listGroup[anchorIndex],0)
}