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

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

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

class="left-menu"

:data="leftMenu"

ref="leftMenu">

• class="left-item"

  ref="leftItem"

  :class="{'current': currentIndex === index}"

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

  v-for="(item, index) in leftMenu"

  :key="index">

  {{item}}

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

class="right-menu"

:data="rightMenu"

ref="rightMenu"

@scroll="scrollHeight"

:listenScroll="true"

:probeType="3">

• {{items.title}}{{item}}

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

當(dāng)然因為這是個子組件，我們將通過父組件傳遞 props ，所以定義 props

props: {

leftMenu: {

required: true,

type: Array,

default () {

return []

}

},

rightMenu: {

required: true,

type: Array,

default () {

return []

}

},

}

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

if (this.listenScroll) {

let me = this

this.scroll.on('scroll', (pos) => {

me.$emit('scroll', pos)

})

}

所以我們在右邊菜單的 scroll 組件上監(jiān)聽scroll事件

@scroll="scrollHeight"

method

scrollHeight (pos) {

console.log(pos);

this.scrollY = Math.abs(Math.round(pos.y))

},

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

我們可以看到控制臺打出了當(dāng)前滾動的pos信息，因為在移動端開發(fā)時，坐標(biāo)軸和我們數(shù)學(xué)中的坐標(biāo)軸相反，所以上滑時y軸的值是負數(shù)

所以我們要得到每一塊 li 的高度,我們可以通過拿到他們的 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)

}

我們在 created 這個 hook 之后調(diào)用這個計算高度的函數(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)前滾動距離實在那個區(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 的菜單項 active 以上是左邊菜單根據(jù)右邊菜單的滑動聯(lián)動的實現(xiàn)，用戶也可以通過點擊左邊菜單來實現(xiàn)右邊菜單的聯(lián)動，此時，我們給菜單項加上 click事件

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

selectLeft (index, event) {

if (!event._constructed) {

return

}

let rightItem = this.$refs.rightItem

let el = rightItem[index]

this.$refs.rightMenu.scrollToElement(el, 300)

},

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

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

超強干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的vue 左右滑动菜单_Vue实现左右菜单联动实现代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。