右侧快速入口滑动时左侧跟着变化 

 1  <!--右侧字母-->
 2        <div class="list-shortcut" >
 3          <ul>
 4            <li  v-for="(item,index) of shortcutList"     @touchstart.stop.prevent="onShortcutTouchStart"   @touchmove.stop.prevent="onShortcutTouchMove"   :data-index="index"  class="item">{{item}}</li>
 5          </ul>
 6        </div>
 7 
 8 
 9 
10 
11 事件方法：
12   onShortcutTouchStart(e){
13         let anchorIndex = getData(e.target, 'index')
14         // this.$refs.listview.scrollToElement(this.$refs.listGroup[anchorIndex],0)
15         // 右侧滑动代码
16         let firstTouch = e.touches[0]
17         this.touch.y1 = firstTouch.pageY
18         this.touch.anchorIndex = anchorIndex
19         this. _scrollTo(anchorIndex)
20       },
21       onShortcutTouchMove(e){
22         let firstTouch = e.touches[0]
23         this.touch.y2 = firstTouch.pageY
24         let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0//移动的了几个字母；/18移动了几个锚点
25         let anchorIndex = parseInt(this.touch.anchorIndex) + delta
26         this. _scrollTo(anchorIndex)
27       },
28       _scrollTo(index){
29         this.$refs.listview.scrollToElement(this.$refs.listGroup[index],0)
30       }

 

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