Vue + better-scroll 实现移动端字母索引导航功能

scrollToElement (index) {
// 处理边界情况
// 因为 index 通过滑动距离计算出来的
// 所以向上滑超过索引框框的时候就会 < 0，向上就会超过最大值
if (index < 0) {
return
} else if (index > this.listHeight.length - 2) {
index = this.listHeight.length - 2
}
// listHeight 是正的， 所以加个 -
this.scrollY = -this.listHeight[index] this.scroll.scrollToElement(this.$refs.listGroup[index])
}

lazyload

lazyload 插件也顺便说一下哈，增加一下用户体验。

使用方法

先 npm 安装

在 main.js 中 import，然后 Vue.use

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
 loading: require('./common/image/default.jpg')
})

添加一张 loading 图片，使用 webpack 的 require 获取图片。

然后在需要使用的时候，把 :src=”” 换成 v-lazy=”” 就实现了图片懒加载的功能。

总结

移动端字母索引导航就这么实现啦，感觉还是很有难度的哈（对我来说）。

主要就是使用了 better-scroll 的 on 获取移动偏移值（实现高亮）、scrollToElement 跳转到相应的位置（实现跳转）。以及使用 touch 事件监听触摸，来获取开始的位置，以及滑动距离（计算最后的位置）。

总结

以上所述是小编给大家介绍的Vue + better-scroll 实现移动端字母索引导航功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！