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;
代码如下:
1 //滚动事件封装: 2 scrollTo() {//封装滚动 3 this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments) 4 //使用apply是因为这个scrollTo方法会接收一些参数的,我们要把这些参数传递到better-scroll的scroll里面, 5 }, 6 scrollToElement() {//滚动到某个元素 7 this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments) 8 } 9 //自定义属性获取:dom.js 10 export function getData(el, name, val) {//该方法是用来获取data-自定义属性的 11 const prefix = 'data-' 12 if (val) { 13 return el.setAttribute(prefix + name, val) 14 } 15 return el.getAttribute(prefix + name) 16 } 17 //listview.vue中touchStart事件 18 onShortcutTouchStart(e){ 19 let anchorIndex = getData(e.target, 'index') 20 this.$refs.listview.scrollToElement(this.$refs.listGroup[anchorIndex],0) 21 }