Vue + better-scroll怎么實(shí)現(xiàn)移動(dòng)端字母索引導(dǎo)航功能

小編給大家分享一下Vue + better-scroll怎么實(shí)現(xiàn)移動(dòng)端字母索引導(dǎo)航功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

vue+ better-scroll 實(shí)現(xiàn)移動(dòng)端歌手列表字母索引導(dǎo)航。算是一個(gè)學(xué)習(xí)筆記吧，寫個(gè)筆記讓自己了解的更加深入一點(diǎn)。

Demo：list-view，使用 chrome 手機(jī)模式查看。換成手機(jī)模式之后，不能滑動(dòng)的話，刷新一下就 OK 了。

效果圖

配置環(huán)境

因?yàn)橛玫降氖?vue-cli 和 better-scroll，所以首先要安裝 vue-cli，然后再 npm 安裝better-scroll。

簡單介紹一下 better-scroll：

better-scroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場景需求的插件。它的核心是借鑒的 iscroll 的實(shí)現(xiàn)，它的 API 設(shè)計(jì)基本兼容 iscroll，在 iscroll 的基礎(chǔ)上又?jǐn)U展了一些 feature 以及做了一些性能優(yōu)化。
better-scroll 是基于原生 JS 實(shí)現(xiàn)的，不依賴任何框架。它編譯后的代碼大小是 63kb，壓縮后是 35kb，gzip 后僅有 9kb，是一款非常輕量的 JS lib。

除了這兩，還使用 scss、vue-lazyload。scss 預(yù)處理器，大家都懂，用別的也一樣。lazyload 實(shí)現(xiàn)懶加載，不用也可以，主要是優(yōu)化一下體驗(yàn)。

數(shù)據(jù)直接使用了網(wǎng)易云的歌手榜單，偷懶就直接放在 data 里面了。

CSS 樣式我就不貼了，直接看源碼就可以了。

實(shí)現(xiàn)基本樣式

直接使用 v-for 和 雙側(cè)嵌套實(shí)現(xiàn)歌手列表、以及右側(cè)索引欄。

HTML 結(jié)構(gòu)：

<ul>
 <li v-for="group in singers" 
 class="list-group" 
 :key="group.id" 
 ref="listGroup">
  <h3 class="list-group-title">{{ group.title }}</h3>
  <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 是通過計(jì)算屬性得到的，取 title 的第一個(gè)字符即可。

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

使用 better-scroll

使用 better-scroll 實(shí)現(xiàn)滾動(dòng)。對了，使用的時(shí)候別忘了用 import 引入。

created () {
 // 初始化 better-scroll 必須要等 dom 加載完畢
 setTimeout(() => {
  this._initSrcoll()
 }, 20)
},
methods: {
 _initSrcoll () {
  console.log('didi')
  this.scroll = new BScroll(this.$refs.listView, {
   // 獲取 scroll 事件，用來監(jiān)聽。
   probeType: 3
  })
 }
}

使用 created 方法進(jìn)行 better-scroll 初始化，使用 setTimeout 是因?yàn)樾枰鹊?DOM 加載完畢。不然 better-scroll 獲取不到 dom 就會(huì)初始化失敗。

這里把方法寫在兩 methods 里面，這樣就不會(huì)看起來很亂，直接調(diào)用就可以了。

初始化的時(shí)候傳入兩 probeType: 3，解釋一下：當(dāng) probeType 為 3 的時(shí)候，不僅在屏幕滑動(dòng)的過程中，而且在 momentum 滾動(dòng)動(dòng)畫運(yùn)行過程中實(shí)時(shí)派發(fā) scroll 事件。如果沒有設(shè)置該值，其默認(rèn)值為 0，即不派發(fā) scroll 事件。

給索引添加點(diǎn)擊事件和移動(dòng)事件實(shí)現(xiàn)跳轉(zhuǎn)

首先需要給索引綁定一個(gè) touchstart 事件（當(dāng)在屏幕上按下手指時(shí)觸發(fā)），直接使用 v-on 就可以了。然后還需要給索引添加一個(gè) 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>

綁定一個(gè) onShortcutStart 方法。實(shí)現(xiàn)點(diǎn)擊索引跳轉(zhuǎn)的功能。再綁定一個(gè) onShortcutMove 方法，實(shí)現(xiàn)滑動(dòng)跳轉(zhuǎn)。

created () {
 // 添加一個(gè) touch 用于記錄移動(dòng)的屬性
 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 方法實(shí)現(xiàn)跳轉(zhuǎn)
  this.scroll.scrollToElement(this.$refs.listGroup[index])

  // 記錄一下點(diǎn)擊時(shí)候的 Y坐標(biāo) 和 index
  let firstTouch = e.touches[0].pageY
  this.touch.y1 = firstTouch
  this.touch.anchorIndex = index
 },
 onShortcutMove (e) {
  // 再記錄一下移動(dòng)時(shí)候的 Y坐標(biāo)，然后計(jì)算出移動(dòng)了幾個(gè)索引
  let touchMove = e.touches[0].pageY
  this.touch.y2 = touchMove
  
  // 這里的 16.7 是索引元素的高度
  let delta = Math.floor((this.touch.y2 - this.touch.y1) / 18)

  // 計(jì)算最后的位置
  // * 1 是因?yàn)?nbsp;this.touch.anchorIndex 是字符串，用 * 1 偷懶的轉(zhuǎn)化一下
  let index = this.touch.anchorIndex * 1 + delta
  this.scroll.scrollToElement(this.$refs.listGroup[index])
 }
}

這樣就可以實(shí)現(xiàn)索引的功能了。

當(dāng)然這樣是不會(huì)滿足我們的對不對，我們要加入炫酷的特效呀。比如索引高亮什么的~~

移動(dòng)內(nèi)容索引高亮

emmm，這個(gè)時(shí)候就有點(diǎn)復(fù)雜啦。但是有耐心就可以看懂滴。

我們需要 better-scroll 的 on 方法，返回內(nèi)容滾動(dòng)時(shí)候的 Y軸偏移值。所以在初始化 better-scroll 的時(shí)候需要添加一下代碼。對了，別忘了在 data 中添加一個(gè) scrollY，和 currentIndex （用來記錄高亮索引的位置）因?yàn)槲覀冃枰O(jiān)聽，所以在 data 中添加。

_initSrcoll () {
 this.scroll = new BScroll(this.$refs.listView, {
  probeType: 3,
  click: true
 })
 // 監(jiān)聽Y軸偏移的值
 this.scroll.on('scroll', (pos) => {
  this.scrollY = pos.y
 })
}

然后需要計(jì)算一下內(nèi)容的高度，添加一個(gè) calculateHeight() 方法，用來計(jì)算索引內(nèi)容的高度。

_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 中監(jiān)聽 scrollY，看代碼：

watch: {
 scrollY (newVal) {
  // 向下滑動(dòng)的時(shí)候 newVal 是一個(gè)負(fù)數(shù)，所以當(dāng) newVal > 0 時(shí)，currentIndex 直接為 0
  if (newVal > 0) {
   this.currentIndex = 0
   return
  }
  // 計(jì)算 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
   }
  }
  // 當(dāng)超 -newVal > 最后一個(gè)高度的時(shí)候
  // 因?yàn)?nbsp;this.listHeight 有頭尾，所以需要 - 2
  this.currentIndex = this.listHeight.length - 2
 }
}

得到 currentIndex 的之后，在 html 中使用。

給索引綁定 class -->  :class="{'current': currentIndex === index}"

最后再處理一下滑動(dòng)索引的時(shí)候改變 currentIndex。

因?yàn)榇a可以重復(fù)利用，且需要處理邊界情況，所以就把

this.scroll.scrollToElement(this.$refs.listGroup[index])

重新寫了個(gè)函數(shù)，來減少代碼量。

// 在 scrollToElement 的時(shí)候，改變 scrollY，因?yàn)橛?nbsp;watch 所以就會(huì)計(jì)算出 currentIndex
scrollToElement (index) {
 // 處理邊界情況
 // 因?yàn)?nbsp;index 通過滑動(dòng)距離計(jì)算出來的
 // 所以向上滑超過索引框框的時(shí)候就會(huì) < 0，向上就會(huì)超過最大值
 if (index < 0) {
  return
 } else if (index > this.listHeight.length - 2) {
  index = this.listHeight.length - 2
 }
 // listHeight 是正的， 所以加個(gè) -
 this.scrollY = -this.listHeight[index]
 this.scroll.scrollToElement(this.$refs.listGroup[index])
}

lazyload

lazyload 插件也順便說一下哈，增加一下用戶體驗(yàn)。

使用方法

先 npm 安裝

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

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

添加一張 loading 圖片，使用 webpack 的 require 獲取圖片。

然后在需要使用的時(shí)候，把 :src="" 換成 v-lazy="" 就實(shí)現(xiàn)了圖片懶加載的功能。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

看完了這篇文章，相信你對“Vue + better-scroll怎么實(shí)現(xiàn)移動(dòng)端字母索引導(dǎo)航功能”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！