Vue + better-scroll怎么实现移动端字母索引导航功能 - 行业资讯

　　介绍

小编给大家分享一下Vue + better-scroll怎么实现移动端字母索引导航功能,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

Vue + better-scroll实现移动端歌手列表字母索引导航。算是一个学习笔记吧,写个笔记让自己了解的更加深入一点。

演示:列表视图,使用chrome手机模式查看。换成手机模式之后,不能滑动的话,刷新一下就好了。

效果图

& lt; ul> 　　,& lt; li v=癵roup singers"拷贝, 　　类=發ist-group"大敌; 　　,:关键=癵roup.id", 　　,,ref=發istGroup"的在　　& lt;才能h3 类=發ist-group-title"在{{,group.title }} & lt;/h3> 　　& lt;才能ul> 　　,,& lt; li v=癷tem group.items"拷贝, 　　类,,=發ist-group-item",:关键=癷tem.id"比; 　　,,,& lt; img v-lazy=癷tem.avatar",类=癮vatar"比; 　　,,,& lt; span 类=皀ame"在{{,item.name }} & lt;/span> 　　,,& lt;/li> 　　& lt;才能/ul> 　　,& lt;/li> 　　& lt;/ul> 　　& lt; div 类=發ist-shortcut"祝辞　　,& lt; ul> 　　& lt;才能li v=?项目,,指数),拷贝shortcutList" 　　类才能=癷tem" 　　,,:材料指数=癷ndex" 　　,,:关键=癷tem.id" 　　祝辞才能; 　　,,{{,item }} 　　& lt;才能/li> 　　,& lt;/ul> 　　& lt;/div>

shortcutList是通过计算属性得到的,取标题的第一个字符即可。

shortcutList (), { 　　,return this.singers.map((集团),=祝辞,{ 　　return 才能group.title.substr (0, 1) 　　,}) 　　}

<强>使用better-scroll

使用better-scroll实现滚动。对了,使用的时候别忘了用进口引入。

created (), { 　　,//初始化,better-scroll 必须要等,dom 加载完毕　　,setTimeout((),=祝辞,{ 　　this._initSrcoll才能() 　　,},20) 　　}, 　　方法:,{ 　　,_initSrcoll (), { 　　console.log才能(& # 39;迪迪# 39;) 　　时间=this.scroll 才能;new BScroll(这一点。refs.listView美元,,{//,,,获取,scroll 事件,用来监听。　　,,probeType: 3 　　})才能　　,} 　　}

使用创建方法进行better-scroll初始化,使用setTimeout是因为需要等到DOM加载完毕。不然better-scroll获取不到DOM就会初始化失败。

这里把方法写在两方法里面,这样就不会看起来很乱,直接调用就可以了。

初始化的时候传入两probeType: 3,解释一下:当probeType为3的时候,不仅在屏幕滑动的过程中,而且在动量滚动动画运行过程中实时派发滚动事件。如果没有设置该值,其默认值为0,即不派发滚动事件。

<强>给索引添加点击事件和移动事件实现跳转

首先需要给索引绑定一个touchstart事件(当在屏幕上按下手指时触发),直接使用v就可以了。然后还需要给索引添加一个材料指数这样就可以获取到索引的值,使用:材料指数=癷ndex".

& lt; div 类=發ist-shortcut"比; 　　,& lt; ul> 　　& lt;才能li v=?项目,,指数),拷贝shortcutList" 　　类才能=癷tem" 　　,,:材料指数=癷ndex" 　　,,:关键=癷tem.id" 　　@touchstart才能=皁nShortcutStart" 　　@touchmove.stop.prevent才能=皁nShortcutMove" 　　祝辞才能; 　　,,{{,item }} 　　& lt;才能/li> 　　,& lt;/ul> 　　& lt;/div>

绑定一个> created (), { 　　,//添加一个,touch 用于记录移动的属性=,this.touch , {} 　　,//初始化,better-scroll 必须要等,dom 加载完毕　　,setTimeout((),=祝辞,{ 　　this._initSrcoll才能() 　　,},20) 　　}, 　　方法:,{ 　　,_initSrcoll (), { 　　时间=this.scroll 才能;new BScroll(这一点。refs.listView美元,,{ 　　,,,probeType: 3, 　　,,点击:真实　　})才能　　}, 　　,onShortcutStart (e), {//,才能获取到绑定的,指数　　let 才能;index =, e.target.getAttribute (& # 39; data-index& # 39;)//,才能使用,better-scroll 的,scrollToElement 方法实现跳转　　this.scroll.scrollToElement才能(这一点。refs.listGroup美元(指数))//,才能记录一下点击时候的,Y坐标,和指数　　let 才能;firstTouch =, e.touches [0] .pageY 　　this.touch.y1 才能=firstTouch 　　时间=this.touch.anchorIndex 才能;指数　　}, 　　,onShortcutMove (e), { 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null