成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue實(shí)現(xiàn)左右菜單聯(lián)動實(shí)現(xiàn)

劉福 / 2507人閱讀

摘要：動態(tài)數(shù)據(jù)結(jié)構(gòu)菜單數(shù)據(jù)是用戶自定義增加一些內(nèi)容，并渲染左菜單的結(jié)構(gòu)右菜單的結(jié)構(gòu)這里是為了做，所以在數(shù)據(jù)上只是單純捏造。

知乎

個(gè)人博客

Github

源碼傳送門：Rain120/vue-study

根據(jù)掘金評論需求，更新了數(shù)據(jù)接口并修復(fù)了一些問題

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

這個(gè)組件分為兩個(gè)部分，1、左菜單；2、右菜單。

動態(tài)數(shù)據(jù)結(jié)構(gòu)

menus: [
  {
    name: "菜單1",
    data: [
      {
        name: "1.1"
      },
      {
        name: "1.2"
      },
      {
        name: "1.3"
      },
      {
        name: "1.4"
      },
      {
        name: "1.5"
      },
      {
        name: "1.6"
      }
    ]
  }
]

data數(shù)據(jù)是用戶自定義增加一些內(nèi)容，并渲染DOM

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


  

    
    
      
  • 
        
    {{menu.name}}
    
      
    •

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


  

    
    
      
  • 
        
    {{menu.name}}
    
        
      
          
    • 
            
      
              
      {{item.name}}
      
            
      
          
      • 
        
    
      
    •

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

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

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

在這個(gè)業(yè)務(wù)場景中，我們的實(shí)現(xiàn)方式是根據(jù)右邊菜單滾動的高度來計(jì)算左邊菜單的位置，當(dāng)然左邊菜單也可以通過點(diǎn)擊來確定右邊菜單需要滾動多高的距離，那么我們?nèi)绾潍@得該容器滾動的距離呢？
之前一直在使用better-scroll，通過閱讀文檔，我們知道它有有scroll事件，我們可以通過監(jiān)聽這個(gè)事件來獲取滾動的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信息，因?yàn)樵谝苿佣碎_發(fā)時(shí)，坐標(biāo)軸和我們數(shù)學(xué)中的坐標(biāo)軸相反，所以上滑時(shí)y軸的值是負(fù)數(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這個(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)用戶在滾動時(shí)，我們需要計(jì)算當(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ù)右邊菜單的滑動聯(lián)動的實(shí)現(xiàn)，用戶也可以通過點(diǎn)擊左邊菜單來實(shí)現(xiàn)右邊菜單的聯(lián)動，此時(shí)，我們給菜單項(xiàng)加上click事件

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

這里加上$event是為了區(qū)分原生點(diǎn)擊事件還是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)
},

使用

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96836.html

相關(guān)文章

  • VUE+element三級聯(lián)動或樹形菜單獲取最后一項(xiàng),并加入到表格中

    摘要：如下圖要實(shí)現(xiàn)的功能如下勾選三級聯(lián)動的材料勾選最后一級的材料把勾選的材料信息動態(tài)添加到下面表格中數(shù)據(jù)三級聯(lián)動數(shù)據(jù)材料鍵值對選中的材料從后臺獲取三級聯(lián)動數(shù)據(jù)調(diào)用封裝的函數(shù)把最后一項(xiàng)添加到函數(shù)中獲取最后一級材料函數(shù)遍歷材料樹如果有下級材料就一直 如下圖,要實(shí)現(xiàn)的功能如下,勾選三級聯(lián)動的材料,勾選最后一級的材料,把勾選的材料信息動態(tài)添加到下面表格中showImg(https://segment...

    yeyan1996 評論0 收藏0

  • 關(guān)于Vue組件化開發(fā)的思考

    摘要：因?yàn)橛X得這個(gè)是在項(xiàng)目中最常用的功能，提取出來方便復(fù)用的才是組件然而我才發(fā)現(xiàn)這個(gè)想法是有問題的。聯(lián)動思考悟緣起于最近的一個(gè)表單開發(fā)，頁面上有個(gè)是聯(lián)動菜單的選項(xiàng)。兩個(gè)組件放在不同的板塊內(nèi)，相互獨(dú)立，方便管理和維護(hù)。 今天在家躺了一天，直到晚上才考慮清楚，當(dāng)人沒有明確目標(biāo)的時(shí)候，太容易被環(huán)境影響了。目標(biāo)需要切合實(shí)際，至于和實(shí)際之間的距離，取決于當(dāng)前認(rèn)知的正確和全面。 既有認(rèn)知（誤） 一般說到...

    lemon 評論0 收藏0

  • vue移動端側(cè)滑面板組件

    摘要：里邊涉及到的指令是自定義的指令，為了處理移動端的點(diǎn)擊操作，我還整理了一片陋文移動點(diǎn)擊長按滑動指令然后這個(gè)組件的源碼我放在了我出來的項(xiàng)目上謝謝各位品嘗， 以下這段都是廢話，請?zhí)^ 公司移動端開發(fā)平臺進(jìn)行了大變革，前端架構(gòu)由DCloud大生態(tài)轉(zhuǎn)換為VUE，所以移動端的UI組件庫從MUI改為使用MintUI，然后開始大刀闊斧的把MintUI組件改成MUI組件的樣子，然后發(fā)現(xiàn)少了幾個(gè)較為常用的...

    TNFE 評論0 收藏0

  • 慕課網(wǎng) 餓了么 vue2.0 項(xiàng)目

    餓了么 vue 項(xiàng)目總結(jié) 項(xiàng)目效果預(yù)覽 ele效果預(yù)覽項(xiàng)目源碼地址 ele源碼跟著慕課網(wǎng)黃軼老師 敲餓了么 vue 項(xiàng)目 作者項(xiàng)目源代碼地址 項(xiàng)目完成之后 npm run build 這本來是寫在最后面一段的，我現(xiàn)在把他寫在了最前面，方便我們事先知道，整個(gè)項(xiàng)目做完之后是什么樣子的 項(xiàng)目完成之后在 根目錄 下 npm run build （就是 npm run dev 的那個(gè)目錄） 會在根目錄...

    xuexiangjys 評論0 收藏0

  • 用Vue擼一個(gè)『A-Z字母滑動檢索菜單』

    摘要：最近用仿寫途牛旅行遇到了這樣的城市列表選擇頁面，花了些時(shí)間，用實(shí)現(xiàn)了一下并讓它體驗(yàn)的接近安卓原生組件很多地方都會有這樣的側(cè)邊欄字母列表菜單，可以滑動實(shí)現(xiàn)內(nèi)容列表聯(lián)動。 最近用vue仿寫途牛旅行APP 遇到了這樣的城市列表選擇頁面，花了些時(shí)間，用Vue實(shí)現(xiàn)了一下并讓它體驗(yàn)的接近 安卓/IOS 原生組件 很多地方都會有這樣的側(cè)邊欄字母列表菜單，可以滑動實(shí)現(xiàn)內(nèi)容列表聯(lián)動。 比如手機(jī)通訊錄，城...

    warnerwu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<