說明

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

代碼

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

//頁面結(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,//獲取實時滾動位置heightList: []//獲取每一個li的高度}}</script>

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

better-scroll的使用

• 元素縱軸滾動
  • 元素可以滾動，父元素高度固定，overflow為 hidden，子元素高度超過父元素高度即可滑動，不多解釋。
• 左菜單、右菜單可以在父元素滑動
  • 左菜單欄因為要用到 click事件，默認better-scroll是默認阻止 click事件，設(shè)置為true派發(fā)一個click事件。
  • 右菜單欄，因為需要滾動，并且需要獲取實時滾動距離scrollY，因此設(shè)置 probeType設(shè)置為3，它有三個值1、2、3。看以查看文檔probeType。
  //引入better-scrollimport Bscroll from 'better-scroll'export default {created(){//因為 _scrollInit函數(shù)需要操作DOM，因此必須在DOM元素存在文檔中才能獲取DOM節(jié)點//因此在 nextTick回調(diào)函數(shù)里面調(diào)用可以是實現(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) =>{//獲取實時滾動的距離 使用scrollY接收 this.scrollY = Math.abs(Math.round(pos.y))})}}
• 獲取右菜單欄每個li的高度
  • 這里獲取 li 的高度即為當(dāng)前l(fā)i的高度加上之前 li 的高度，第一個元素為 0(必須)
  methods: {getHeight(){//獲取每一個li的高度const lis = this.$refs.rItem//heightList的第一個元素為0let height = 0this.heightList.push(height)//之后的高度即為當(dāng)前l(fā)i的高度加上之前面li的高度和lis.forEach(item =>{height += item.clientHeightthis.heightList.push(height)})}}
• 右菜單滾動，左菜單同步
  • 這里就是根據(jù)右菜單滑動的距離以及每一個每一個 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}}

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

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

總結(jié)

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

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