zoukankan      html  css  js  c++  java
  • 右侧快速入口滑动时左侧跟着变化

     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       }
  • 相关阅读:
    Shiro权限验证
    5种设计模式整理
    多模块的SpringBoot项目
    Go使用数据库
    使用Go mod
    docker基本使用
    Go的IO操作
    实现一个网盘存储……
    Go的网络编程
    学习golang的历程
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9455326.html
Copyright © 2011-2022 走看看