1. 首页
  2. 编程语言
  3. Javascript
  4. Vue + better-scroll 实现移动端字母索引导航功能

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

上传者: 2021-09-10 05:25:46上传 PDF文件 148.53 KB 热度 8次

vue+ better-scroll 实现移动端歌手列表字母索引导航。算是一个学习笔记吧,写个笔记让自己了解的更加深入一点。除了这两,还使用 scss、vue-lazyload。直接使用 v-for 和 双侧嵌套实现歌手列表、以及右侧索引栏。使用 created 方法进行 better-scroll 初始化,使用 setTimeout 是因为需要等到 DOM 加载完毕。不然 better-scroll 获取不到 dom 就会初始化失败。如果没有设置该值,其默认值为 0,即不派发 scroll 事件。给索引绑定 最后再处理一下滑动索引的时候改变 currentIndex。lazyload 插件也顺便说一下哈,增加一下用户体验。先 npm 安装在 main.js 中 import,然后 Vue.use添加一张 loading 图片,使用 webpack 的 require 获取图片。主要就是使用了 better-scroll 的 on 获取移动偏移值、scrollToElement 跳转到相应的位置。

用户评论