Vue實(shí)現(xiàn)左右菜單聯(lián)動(dòng)實(shí)現(xiàn)代碼

更新時(shí)間：2018年08月12日 11:23:46 作者：Rain120

這篇文章主要介紹了Vue實(shí)現(xiàn)左右菜單聯(lián)動(dòng)實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了Vue實(shí)現(xiàn)左右菜單聯(lián)動(dòng)實(shí)現(xiàn)代碼嗎，分享給大家，也給自己留個(gè)筆記，具體如下：

Github

源碼傳送門： Rain120/vue-study

之前在外賣軟件上看到這個(gè)左右聯(lián)動(dòng)的效果，覺(jué)得很有意思，所以就嘗試使用 Vue 來(lái)實(shí)現(xiàn)，將這個(gè)聯(lián)動(dòng)抽離成為一個(gè)單獨(dú)的組件，廢話少說(shuō)，先來(lái)一張效果圖。

這個(gè)組件分為兩個(gè)部分，1、左菜單；2、右菜單。左菜單的 DOM 結(jié)構(gòu)

<scroll
 class="left-menu"
 :data="leftMenu"
 ref="leftMenu">
 <div class="left-menu-container">
 <ul>
  <li
  class="left-item"
  ref="leftItem"
  :class="{'current': currentIndex === index}"
  @click="selectLeft(index, $event)"
  v-for="(item, index) in leftMenu"
  :key="index">
  <p class="text">{{item}}</p>
  </li>
 </ul>
 </div>
</scroll>

右菜單的 DOM 結(jié)構(gòu)

<scroll
 class="right-menu"
 :data="rightMenu" 
 ref="rightMenu"
 @scroll="scrollHeight"
 :listenScroll="true"
 :probeType="3">
 <div class="right-menu-container">
 <ul>
  <li class="right-item" ref="rightItem" v-for="(items, i) in rightMenu" :key="i">
  <div class="data-wrapper">
   <div class="title">{{items.title}}</div>
   <div class="data" v-for="(item, j) in items.data" :key="j">{{item}}</div>
  </div>
  </li>
 </ul>
 </div>
</scroll>

這里是為了做 demo ，所以在數(shù)據(jù)上只是單純捏造。

當(dāng)然因?yàn)檫@是個(gè)子組件，我們將通過(guò)父組件傳遞 props ，所以定義 props

props: {
 leftMenu: {
 required: true,
 type: Array,
 default () {
  return []
 }
 },
 rightMenu: {
 required: true,
 type: Array,
 default () {
  return []
 }
 },
}

在這個(gè)業(yè)務(wù)場(chǎng)景中，我們的實(shí)現(xiàn)方式是根據(jù)右邊菜單滾動(dòng)的高度來(lái)計(jì)算左邊菜單的位置，當(dāng)然左邊菜單也可以通過(guò)點(diǎn)擊來(lái)確定右邊菜單需要滾動(dòng)多高的距離，那么我們?nèi)绾潍@得該容器滾動(dòng)的距離呢？之前一直在使用better-scroll，通過(guò)閱讀文檔，我們知道它有有 scroll 事件，我們可以通過(guò)監(jiān)聽這個(gè)事件來(lái)獲取滾動(dòng)的 pos

if (this.listenScroll) {
 let me = this
 this.scroll.on('scroll', (pos) => {
 me.$emit('scroll', pos)
 })
}

所以我們?cè)谟疫叢藛蔚?scroll 組件上監(jiān)聽scroll事件

@scroll="scrollHeight"

method

scrollHeight (pos) {
 console.log(pos);
 this.scrollY = Math.abs(Math.round(pos.y))
},

我們將監(jiān)聽得到的pos打出來(lái)看看

我們可以看到控制臺(tái)打出了當(dāng)前滾動(dòng)的pos信息，因?yàn)樵谝苿?dòng)端開發(fā)時(shí)，坐標(biāo)軸和我們數(shù)學(xué)中的坐標(biāo)軸相反，所以上滑時(shí)y軸的值是負(fù)數(shù)

所以我們要得到每一塊 li 的高度,我們可以通過(guò)拿到他們的 DOM

 _calculateHeight() {
 let lis = this.$refs.rightItem;
 let height = 0
 this.rightHeight.push(height)
 Array.prototype.slice.call(lis).forEach(li => {
 height += li.clientHeight
 this.rightHeight.push(height)
 })
console.log(this.rightHeight)
}

我們?cè)?created 這個(gè) hook 之后調(diào)用這個(gè)計(jì)算高度的函數(shù)

 _calculateHeight() {
 let lis = this.$refs.rightItem;
 let height = 0
 this.rightHeight.push(height)
 Array.prototype.slice.call(lis).forEach(li => {
 height += li.clientHeight
 this.rightHeight.push(height)
 })
 console.log(this.rightHeight)
}

當(dāng)用戶在滾動(dòng)時(shí)，我們需要計(jì)算當(dāng)前滾動(dòng)距離實(shí)在那個(gè)區(qū)間內(nèi)，并拿到他的 index

computed: {
 currentIndex () {
 const { scrollY, rightHeight } = this
 const index = rightHeight.findIndex((height, index) => {
  return scrollY >= rightHeight[index] && scrollY < rightHeight[index + 1]
 })
 return index > 0 ? index : 0
 }
}

所以當(dāng)前應(yīng)該是左邊菜單 index = 1 的菜單項(xiàng) active 以上是左邊菜單根據(jù)右邊菜單的滑動(dòng)聯(lián)動(dòng)的實(shí)現(xiàn)，用戶也可以通過(guò)點(diǎn)擊左邊菜單來(lái)實(shí)現(xiàn)右邊菜單的聯(lián)動(dòng)，此時(shí)，我們給菜單項(xiàng)加上 click事件

@click="selectLeft(index, $event)"

這里加上 $event 是為了區(qū)分原生點(diǎn)擊事件還是[better-scroll]((https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll 是什么)派發(fā)的事件

selectLeft (index, event) {
 if (!event._constructed) {
 return
 }
 let rightItem = this.$refs.rightItem
 let el = rightItem[index]
 this.$refs.rightMenu.scrollToElement(el, 300)
},

到這里我們就基本上完成了這些需求了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: