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


Posted in Javascript onMay 07, 2018

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

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

Github: 移动端字母索引导航

效果图

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

配置环境

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

简单介绍一下 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 实现移动端字母索引导航功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
node使用promise替代回调函数
May 07 #Javascript
node 使用 async 控制并发的方法
May 07 #Javascript
Angular 数据请求的实现方法
May 07 #Javascript
JavaScript数组去重算法实例小结
May 07 #Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 #Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 #Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 #Javascript
You might like
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
Python实现的爬虫功能代码
2017/06/24 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
校园网站的创业计划书范文
2013/12/30 职场文书
集体婚礼策划方案
2014/02/22 职场文书
汽车广告策划方案
2014/05/31 职场文书
一般党员对照检查材料
2014/09/24 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
公司聚餐通知
2015/04/22 职场文书
2015小学师德工作总结
2015/07/21 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
导游词之桂林山水
2019/09/20 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技