Vue + better-scroll 实现移动端字母索引导航功能
|
vue+ better-scroll 实现移动端歌手列表字母索引导航。算是一个学习笔记吧，写个笔记让自己了解的更加深入一点。 Demo：，使用 chrome 手机模式查看。换成手机模式之后，不能滑动的话，刷新一下就 OK 了。 Github： 效果图
配置环境因为用到的是 vue-cli 和 better-scroll，所以首先要安装 vue-cli，然后再 npm 安装。 简单介绍一下 better-scroll：
除了这两，还使用 scss、vue-lazyload。scss 预处理器，大家都懂，用别的也一样。lazyload 实现懒加载，不用也可以，主要是优化一下体验。 数据直接使用了网易云的歌手榜单，偷懒就直接放在 data 里面了。 CSS 样式我就不贴了，直接看源码就可以了。 实现基本样式直接使用 v-for 和 双侧嵌套实现歌手列表、以及右侧索引栏。 HTML 结构： shortcutList 是通过计算属性得到的，取 title 的第一个字符即可。 {
return group.title.substr(0,1)
})
}
使用 better-scroll使用 better-scroll 实现滚动。对了，使用的时候别忘了用 import 引入。 {
this._initSrcoll()
},20)
},methods: {
_initSrcoll () {
console.log('didi')
this.scroll = new BScroll(this.$refs.listView,{
// 获取 scroll 事件，用来监听。
probeType: 3
})
}
}
使用 created 方法进行 better-scroll 初始化，使用 setTimeout 是因为需要等到 DOM 加载完毕。不然 better-scroll 获取不到 dom 就会初始化失败。 这里把方法写在两 methods 里面，这样就不会看起来很乱，直接调用就可以了。 初始化的时候传入两 probeType: 3，解释一下：当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。 给索引添加点击事件和移动事件实现跳转首先需要给索引绑定一个 touchstart 事件（当在屏幕上按下手指时触发），直接使用 v-on 就可以了。然后还需要给索引添加一个 data-index 这样就可以获取到索引的值，使用 :data-index="index" 。 绑定一个 onShortcutStart 方法。实现点击索引跳转的功能。再绑定一个 onShortcutMove 方法，实现滑动跳转。 {
this._initSrcoll()
},methods: {
_initSrcoll () {
this.scroll = new BScroll(this.$refs.listView,{
probeType: 3,click: true
})
},onShortcutStart (e) {
// 获取到绑定的 index
let index = e.target.getAttribute('data-index')
// 使用 better-scroll 的 scrollToElement 方法实现跳转
this.scroll.scrollToElement(this.$refs.listGroup[index])
// 记录一下点击时候的 Y坐标 和 index // 这里的 16.7 是索引元素的高度 // 计算最后的位置 这样就可以实现索引的功能了。 当然这样是不会满足我们的对不对，我们要加入炫酷的特效呀。比如索引高亮什么的~~ 移动内容索引高亮emmm，这个时候就有点复杂啦。但是有耐心就可以看懂滴。 我们需要 better-scroll 的 on 方法，返回内容滚动时候的 Y轴偏移值。所以在初始化 better-scroll 的时候需要添加一下代码。对了，别忘了在 data 中添加一个 scrollY，和 currentIndex （用来记录高亮索引的位置）因为我们需要监听，所以在 data 中添加。 {
this.scrollY = pos.y
})
}
然后需要计算一下内容的高度，添加一个 calculateHeight() 方法，用来计算索引内容的高度。 然后在 watch 中监听 scrollY，看代码： 0 时，currentIndex 直接为 0
if (newVal > 0) {
this.currentIndex = 0
return
}
// 计算 currentIndex 的值
for (let i = 0; i < this.listHeight.length - 1; i++) {
let height1 = this.listHeight[i]
let height2 = this.listHeight[i + 1]
if (-newVal >= height1 && -newVal < height2) { 得到 currentIndex 的之后，在 html 中使用。 给索引绑定 最后再处理一下滑动索引的时候改变 currentIndex。 因为代码可以重复利用，且需要处理边界情况，所以就把
重新写了个函数，来减少代码量。 this.listHeight.length - 2) {
index = this.listHeight.length - 2
}
// listHeight 是正的， 所以加个 -
this.scrollY = -this.listHeight[index]
this.scroll.scrollToElement(this.$refs.listGroup[index])
}
lazyloadlazyload 插件也顺便说一下哈，增加一下用户体验。 使用方法先 npm 安装 在 main.js 中 import，然后 Vue.use 添加一张 loading 图片，使用 webpack 的 require 获取图片。 然后在需要使用的时候，把 :src="" 换成 v-lazy="" 就实现了图片懒加载的功能。 总结移动端字母索引导航就这么实现啦，感觉还是很有难度的哈（对我来说）。 主要就是使用了 better-scroll 的 on 获取移动偏移值（实现高亮）、scrollToElement 跳转到相应的位置（实现跳转）。以及使用 touch 事件监听触摸，来获取开始的位置，以及滑动距离（计算最后的位置）。 总结以上所述是小编给大家介绍的Vue + better-scroll 实现移动端字母索引导航功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
