歌手右侧快速入口ABCD....

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       }

 

posted @ 2018-08-10 15:07  前端极客  阅读(516)  评论(0编辑  收藏  举报