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

 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       }

转载于:https://www.cnblogs.com/yangguoe/p/9455326.html

右侧快速入口滑动时左侧跟着变化相关推荐

完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题
完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题参考文章: (1)完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题 (2)https://www.cnblogs.com/qhanti ...
Fresco对Listview等快速滑动时停止加载
Fresco中在listview之类的快速滑动时停止加载,滑动停止后恢复加载: 1.设置图片请求是否开启 [java] view plaincopy print? // 暂停图片请求 public s ...
移动端html右滑空白,BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法...
最近的一个项目前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽).一直在Chrome的仿真机测试 ...
Android 8.0 运行时权限策略变化和适配方案
Android8.0也就是Android O即将要发布了,有很多新特性,目前我们可以通过AndroidStudio3.0 Canary版本下载Android O最新的系统映像的Developer Pr ...
实现随着下拉菜单中选中值的变化周边的值也也跟着变化。（使用【 VLOOKUP 】函数）
前言: 我们要实现如下功能. 部门姓名职务 ------------------------------ 实现如下功能其中,姓名是一个下列菜单. 选中姓名时,部门和职务也跟着变化. ...
ListView优化机制及滑动时数据时出现的数据错乱重复问题图片、checkBox等
该篇内容主要是记录我在实际开发中遇到的ListView滑动时数据错乱的几种情况,以及解决方法.在进行ListView滑动时数据错乱问题讨论之前会对ListView所谓的<优化>进行说明.文 ...
RecyclerView使用及滑动时加载图片优化方案
RecyclerView使用及滑动时加载图片优化方案简述本篇博文主要给大家分享关于RecyclerView控件的使用及通过继承RecyclerView来实现滑动时加载图片的优化方案,也同样能解 ...
vue导航栏滑动切换居中，导航栏超出部分可以滑动，点击触发滑动对应的index，且滑动时导航栏会自动对应
效果图模仿婚礼纪电子请帖模块导航栏超出部分可以滑动,点击触发滑动对应的index,且滑动时导航栏会自动对应 Html部分 <template><div class=" ...
标题滑动隐藏，滑动中背景图标变化，仿淘宝商祥
先申明菜鸟一枚,有不对的地方欢迎大神指正.编辑的主要目的是记录下最近做的一些效果.仿淘宝商祥标题下拉滑动时的渐变,滑到详情时详情的标题栏固定不动由详情的内容继续滑动.效果如图: 先分两个部分一是滑动的 ...

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

右侧快速入口滑动时左侧跟着变化相关推荐

最新文章

热门文章