欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-14 13:45:42
vue+ better-scroll 实现移动端歌手列表字母索引导航。算是一个学习笔记吧,写个笔记让自己了解的更加深入一点。 demo:,使用 chrome 手机模式查看...

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

demo:,使用 chrome 手机模式查看。换成手机模式之后,不能滑动的话,刷新一下就 ok 了。

github: 移动端字母索引导航

效果图

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

配置环境

因为用到的是 vue-cli 和 better-scroll,所以首先要安装 vue-cli,然后再 npm 安装。

简单介绍一下 better-scroll:

better-scroll 是一款重点解决移动端(已支持 pc)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 api 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 js 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 js lib。

除了这两,还使用 scss、vue-lazyload。scss 预处理器,大家都懂,用别的也一样。lazyload 实现懒加载,不用也可以,主要是优化一下体验。

数据直接使用了网易云的歌手榜单,偷懒就直接放在 data 里面了。

css 样式我就不贴了,直接看源码就可以了。

实现基本样式

直接使用 v-for 和 双侧嵌套实现歌手列表、以及右侧索引栏。

html 结构:

<ul>
 <li v-for="group in singers" 
 class="list-group" 
 :key="group.id" 
 ref="listgroup">
  <h2 class="list-group-title">{{ group.title }}</h2>
  <ul>
   <li v-for="item in group.items" 
   class="list-group-item" :key="item.id">
    <img v-lazy="item.avatar" class="avatar">
    <span class="name">{{ item.name }}</span>
   </li>
  </ul>
 </li>
</ul>
<div class="list-shortcut">
 <ul>
  <li v-for="(item, index) in shortcutlist"
  class="item"
  :data-index="index"
  :key="item.id"
  >
   {{ item }}
  </li>
 </ul>
</div>

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

shortcutlist () {
 return this.singers.map((group) => {
  return group.title.substr(0, 1)
 })
}

使用 better-scroll

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

created () {
 // 初始化 better-scroll 必须要等 dom 加载完毕
 settimeout(() => {
  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" 。

<div class="list-shortcut">
 <ul>
  <li v-for="(item, index) in shortcutlist"
  class="item"
  :data-index="index"
  :key="item.id"
  @touchstart="onshortcutstart"
  @touchmove.stop.prevent="onshortcutmove"
  >
   {{ item }}
  </li>
 </ul>
</div>

绑定一个 onshortcutstart 方法。实现点击索引跳转的功能。再绑定一个 onshortcutmove 方法,实现滑动跳转。

created () {
 // 添加一个 touch 用于记录移动的属性
 this.touch = {}
 // 初始化 better-scroll 必须要等 dom 加载完毕
 settimeout(() => {
  this._initsrcoll()
 }, 20)
},
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
  let firsttouch = e.touches[0].pagey
  this.touch.y1 = firsttouch
  this.touch.anchorindex = index
 },
 onshortcutmove (e) {
  // 再记录一下移动时候的 y坐标,然后计算出移动了几个索引
  let touchmove = e.touches[0].pagey
  this.touch.y2 = touchmove
  
  // 这里的 16.7 是索引元素的高度
  let delta = math.floor((this.touch.y2 - this.touch.y1) / 18)

  // 计算最后的位置
  // * 1 是因为 this.touch.anchorindex 是字符串,用 * 1 偷懒的转化一下
  let index = this.touch.anchorindex * 1 + delta
  this.scroll.scrolltoelement(this.$refs.listgroup[index])
 }
}

这样就可以实现索引的功能了。

当然这样是不会满足我们的对不对,我们要加入炫酷的特效呀。比如索引高亮什么的~~

移动内容索引高亮

emmm,这个时候就有点复杂啦。但是有耐心就可以看懂滴。

我们需要 better-scroll 的 on 方法,返回内容滚动时候的 y轴偏移值。所以在初始化 better-scroll 的时候需要添加一下代码。对了,别忘了在 data 中添加一个 scrolly,和 currentindex (用来记录高亮索引的位置)因为我们需要监听,所以在 data 中添加。

_initsrcoll () {
 this.scroll = new bscroll(this.$refs.listview, {
  probetype: 3,
  click: true
 })
 // 监听y轴偏移的值
 this.scroll.on('scroll', (pos) => {
  this.scrolly = pos.y
 })
}

然后需要计算一下内容的高度,添加一个 calculateheight() 方法,用来计算索引内容的高度。

_calculateheight () {
 this.listheight = []
 const list = this.$refs.listgroup
 let height = 0
 this.listheight.push(height)
 for (let i = 0; i < list.length; i++) {
  let item = list[i]
  height += item.clientheight
  this.listheight.push(height)
 }
}
// [0, 760, 1380, 1720, 2340, 2680, 2880, 3220, 3420, 3620, 3960, 4090, 4920, 5190, 5320, 5590, 5790, 5990, 6470, 7090, 7500, 7910, 8110, 8870]
// 得到这样的值

然后在 watch 中监听 scrolly,看代码:

watch: {
 scrolly (newval) {
  // 向下滑动的时候 newval 是一个负数,所以当 newval > 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) {
    this.currentindex = i
    return
   }
  }
  // 当超 -newval > 最后一个高度的时候
  // 因为 this.listheight 有头尾,所以需要 - 2
  this.currentindex = this.listheight.length - 2
 }
}

得到 currentindex 的之后,在 html 中使用。

给索引绑定 class -->  :class="{'current': currentindex === index}"

最后再处理一下滑动索引的时候改变 currentindex。

因为代码可以重复利用,且需要处理边界情况,所以就把

this.scroll.scrolltoelement(this.$refs.listgroup[index])

重新写了个函数,来减少代码量。

// 在 scrolltoelement 的时候,改变 scrolly,因为有 watch 所以就会计算出 currentindex
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 实现移动端字母索引导航功能,希望对大家有所帮助