說(shuō)明

• 最近想做一個(gè)vue商城小項(xiàng)目，練習(xí)一下vue的語(yǔ)法，剛剛好碰到了需要左右菜單實(shí)現(xiàn)聯(lián)動(dòng)，因此就接觸了 better-scroll。
  • github地址
  • 中文文檔。

代碼

• 頁(yè)面結(jié)構(gòu)以及數(shù)據(jù)

//頁(yè)面結(jié)構(gòu)<template> <div id="wrap"><div class="goodMenu" ref="goodMenu"><ul><li v-for="(item ,index) in goodMenu" :key="index":class="{active: currentIndex === index}"@click="selectLeft(index)" ref="lItem">{{ item}}</li></ul></div><div class="goodList" ref="goodList"><ul><li v-for="(items, index) in goodList" :key="index" ref="rItem"><p>{{ items.name}}</p><div v-for="(item, key) in items.data" :key="key">{{ item}}</div></li></ul></div></div></template> //數(shù)據(jù)<script>export default {data(){return {goodMenu: ['菜單1', '菜單2','菜單3', '菜單4', '菜單5', '菜單6', '菜單7', '菜單8'],goodList: [{ name: '菜單1', data: ['1.1', '1.2', '1.3', '1.4', '1.5']},{ name: '菜單2', data: ['1.1', '1.2', '1.3', '1.4', '1.5', '1.6']},{ name: '菜單3', data: ['1.1', '1.2', '1.3', '1.4', '1.5']},{ name: '菜單4', data: ['1.1', '1.2', '1.3', '1.4', '1.5']},{ name: '菜單5', data: ['1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8']},{ name: '菜單6', data: ['1.1', '1.2', '1.3', '1.4', '1.5']},{ name: '菜單7', data: ['1.1', '1.2', '1.3', '1.4']},{ name: '菜單8', data: ['1.1', '1.2']},],scrollY: 0,//獲取實(shí)時(shí)滾動(dòng)位置heightList: []//獲取每一個(gè)li的高度}}</script>

• 渲染結(jié)果
  • 左邊菜單欄(goodMenu)。
  • 右邊菜單欄(goodList)，每一項(xiàng)有一個(gè)標(biāo)題：name，以及菜單數(shù)據(jù)： data數(shù)組。再結(jié)合 v-for指令及相關(guān)樣式即可完成頁(yè)面簡(jiǎn)單布局(不是重點(diǎn))
  • 其他數(shù)據(jù)先不必理會(huì)，先把頁(yè)面結(jié)構(gòu)渲染出來(lái)，下面會(huì)一一講解。

better-scroll的使用

• 元素縱軸滾動(dòng)
  • 元素可以滾動(dòng)，父元素高度固定，overflow為 hidden，子元素高度超過(guò)父元素高度即可滑動(dòng)，不多解釋。
• 左菜單、右菜單可以在父元素滑動(dòng)
  • 左菜單欄因?yàn)橐玫?click事件，默認(rèn)better-scroll是默認(rèn)阻止 click事件，設(shè)置為true派發(fā)一個(gè)click事件。
  • 右菜單欄，因?yàn)樾枰獫L動(dòng)，并且需要獲取實(shí)時(shí)滾動(dòng)距離scrollY，因此設(shè)置 probeType設(shè)置為3，它有三個(gè)值1、2、3。看以查看文檔probeType。
  //引入better-scrollimport Bscroll from 'better-scroll'export default {created(){//因?yàn)?_scrollInit函數(shù)需要操作DOM，因此必須在DOM元素存在文檔中才能獲取DOM節(jié)點(diǎn)//因此在 nextTick回調(diào)函數(shù)里面調(diào)用可以是實(shí)現(xiàn)此功能this.$nextTick(() => { this._scrollInit()this.getHeight()}) },methods:{//初始化 better-scroll_scrollInit(){this.menuList = new Bscroll(this.$refs.goodMenu, {click: true})this.goodmenu = new Bscroll(this.$refs.goodList, {probeType: 3})this.goodmenu.on('scroll', (pos) =>{//獲取實(shí)時(shí)滾動(dòng)的距離 使用scrollY接收 this.scrollY = Math.abs(Math.round(pos.y))})}}
• 獲取右菜單欄每個(gè)li的高度
  • 這里獲取 li 的高度即為當(dāng)前l(fā)i的高度加上之前 li 的高度，第一個(gè)元素為 0(必須)
  methods: {getHeight(){//獲取每一個(gè)li的高度const lis = this.$refs.rItem//heightList的第一個(gè)元素為0let height = 0this.heightList.push(height)//之后的高度即為當(dāng)前l(fā)i的高度加上之前面li的高度和lis.forEach(item =>{height += item.clientHeightthis.heightList.push(height)})}}
• 右菜單滾動(dòng)，左菜單同步
  • 這里就是根據(jù)右菜單滑動(dòng)的距離以及每一個(gè)每一個(gè) li 的高度的比較返回當(dāng)前應(yīng)該顯示左菜單 li的索引，讓該 li 高亮顯示，即:class="{active: currentIndex === index}"。

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

• 左菜單點(diǎn)擊，右菜單同步
  • 把點(diǎn)擊的 菜單索引傳入，使用scrollToElement滾動(dòng)到右菜單的目標(biāo)元素
  selectLeft (index) {let rItem = this.$refs.rItemlet el = rItem[index]this.goodmenu.scrollToElement(el, 1000)}
• 問(wèn)題：有時(shí)候 currentIndex 會(huì)判斷不準(zhǔn)確，是滑動(dòng)距離scrollY 以及右菜單 li的高度比較問(wèn)題，同樣一段代碼，每個(gè)項(xiàng)目遇到的問(wèn)題都是不一樣的，我也是參考網(wǎng)上很多的例子，發(fā)現(xiàn)一到自己這里就出現(xiàn)了很多問(wèn)題，每個(gè)人遇到的問(wèn)題都是不一樣的，結(jié)合自己的問(wèn)題，想辦法解決，這也是成長(zhǎng)的一部分。

轉(zhuǎn)載于:https://www.cnblogs.com/HJ412/p/10755722.html

總結(jié)

以上是生活随笔為你收集整理的Vue使用better-scroll左右菜单联动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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