日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 前端技术 > vue >内容正文

vue

Vue使用better-scroll左右菜单联动

發(fā)布時(shí)間:2025/4/16 vue 45 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Vue使用better-scroll左右菜单联动 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

說(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),父元素高度固定overflowhidden,子元素高度超過(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ò),歡迎將生活随笔推薦給好友。