Vue +滚动效果更好，可实现移动索引导航功能

vue +更好的滚动实现了移动歌手列表的字母索引导航. 这是一份学习笔记，请写笔记以使自己更深入.

演示: ，使用Chrome手机模式查看. 更改为手机模式后，如果无法滑动，请刷新并单击“确定”.

Github: 移动字母索引导航

效果图片

配置环境

因为使用了vue-cli和Better-scroll，请先安装vue-cli，然后再安装npm.

滚动效果简介:

更好的滚动是一个插件，专注于解决移动终端（支持的PC）上各种滚动场景的需求. 其核心是iscroll的实现，以供参考. 其API设计基本上与iscroll兼容. 在iscroll的基础上，对某些功能进行了扩展，并对性能进行了一些优化.

更好的滚动基于本机JS，并且不依赖于任何框架. 编译后的代码大小为63kb，压缩后的代码为35kb，gzip仅为9kb，是一个非常轻巧的JS库.

除了这两个之外，还使用了scss和vue-lazyload. 每个人都了解scss预处理程序，其他人也一样. Lazyload实现了懒加载，您不需要这样做索导航，主要是为了优化体验.

数据直接使用网易云的歌手列表，并且懒惰直接放置在数据中.

我不会发布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是通过计算属性获得的，只需要标题的第一个字符即可.

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

使用滚动效果更好的

使用更好滚动的滚动方式. 顺便说一句，使用导入时不要忘记使用导入.

created () {
 // 初始化 better-scroll 必须要等 dom 加载完毕
 setTimeout(() => {
  this._initSrcoll()
 }, 20)
},
methods: {
 _initSrcoll () {
  console.log('didi')
  this.scroll = new BScroll(this.$refs.listView, {
   // 获取 scroll 事件，用来。
   probeType: 3
  })
 }
}

使用创建的方法进行更好的滚动初始化，并使用setTimeout，因为您需要等待DOM加载完毕. 否则，更好的滚动将无法获得dom，也无法初始化.

在此处的两个方法中编写方法，以使它们看起来不会凌乱，只需直接调用它们即可.

在初始化期间传递了两个probeType: 3. 说明: 当probeType为3时，不仅滚动事件是实时分派的，而且在动量滚动过程中也是如此. 如果未设置此值，则默认值为0，即不调度滚动事件.

将点击事件和移动事件添加到索引以跳转

首先，您需要将touchstart事件绑定到索引（当在屏幕上按下手指时触发），然后使用v-on. 然后，您需要向索引添加一个数据索引，以便使用以下命令获取索引的值: 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索导航，这次有点复杂. 但是只要有耐心，您就可以理解这些滴.

当内容滚动时，我们需要更好滚动的on方法来返回Y轴偏移值. 因此，在初始化更好滚动时需要添加一些代码. 顺便说一句，不要忘记在数据中添加scrollY和currentIndex（用于记录突出显示的索引的位置），因为我们需要侦听，因此请将其添加到数据中.

_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]
// 得到这样的值

然后在手表中收听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，然后导入Vue.use

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

添加加载图片并使用webpack的要求获取图片.

然后，在需要使用它时，将src =“”替换为v-lazy =“”以实现图像的延迟加载功能.

摘要

这是实现移动索引导航的方式. （对我来说，这很难）.

主要使用on-scroll来获取运动偏移值（以实现突出显示），并使用scrollToElement跳转到相应位置（以实现跳转）. 并使用触摸事件来监视触摸，以获取起始位置和滑动距离（计算最终位置）.

摘要

以上是编辑器为实现移动索引导航功能而向您介绍的Vue +更好滚动条. 希望对大家有帮助. 如果您有任何疑问，请给我留言，编辑会回复您. 非常感谢您对脚本网站的支持！

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-190037-1.html