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

 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       }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值