Vue實現左右菜單聯動實現

劉福發布于2019-08-23 10:56 / 2470人閱讀

摘要：動態數據結構菜單數據是用戶自定義增加一些內容，并渲染左菜單的結構右菜單的結構這里是為了做，所以在數據上只是單純捏造。

知乎

個人博客

Github

源碼傳送門：Rain120/vue-study

根據掘金評論需求，更新了數據接口并修復了一些問題

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

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

動態數據結構

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

data數據是用戶自定義增加一些內容，并渲染DOM

左菜單的DOM結構


  
    
      
        {{menu.name}}

右菜單的DOM結構


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

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

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

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

在這個業務場景中，我們的實現方式是根據右邊菜單滾動的高度來計算左邊菜單的位置，當然左邊菜單也可以通過點擊來確定右邊菜單需要滾動多高的距離，那么我們如何獲得該容器滾動的距離呢？
之前一直在使用better-scroll，通過閱讀文檔，我們知道它有有scroll事件，我們可以通過監聽這個事件來獲取滾動的pos

if (this.listenScroll) {
  let me = this
  this.scroll.on("scroll", (pos) => {
    me.$emit("scroll", pos)
  })
}

所以我們在右邊菜單的scroll組件上監聽scroll事件

@scroll="scrollHeight"

method

scrollHeight (pos) {
  console.log(pos);
  this.scrollY = Math.abs(Math.round(pos.y))
},

我們將監聽得到的pos打出來看看

我們可以看到控制臺打出了當前滾動的pos信息，因為在移動端開發時，坐標軸和我們數學中的坐標軸相反，所以上滑時y軸的值是負數

所以我們要得到每一塊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之后調用這個計算高度的函數

 _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)
}

當用戶在滾動時，我們需要計算當前滾動距離實在那個區間內，并拿到他的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
  }
}

所以當前應該是左邊菜單index = 1的菜單項active
以上是左邊菜單根據右邊菜單的滑動聯動的實現，用戶也可以通過點擊左邊菜單來實現右邊菜單的聯動，此時，我們給菜單項加上click事件

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

這里加上$event是為了區分原生點擊事件還是better-scroll派發的事件

selectLeft (index, event) {
  if (!event._constructed) {
    return
  }
  let rightItem = this.$refs.rightItem
  let el = rightItem[index]
  this.$refs.rightMenu.scrollToElement(el, 300)
},

使用

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

GPU云服務器云服務器 js實現左右框 VUE實現webrtc Vue實現分頁底部菜單實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96836.html

VUE+element三級聯動或樹形菜單獲取最后一項,并加入到表格中

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

yeyan1996 2019-08-26 10:28 評論0 收藏0
關于Vue組件化開發的思考

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

lemon 2019-08-26 11:34 評論0 收藏0
vue移動端側滑面板組件

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

TNFE 2019-08-22 16:21 評論0 收藏0
慕課網餓了么 vue2.0 項目

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

xuexiangjys 2019-08-20 18:10 評論0 收藏0
用Vue擼一個『A-Z字母滑動檢索菜單』

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

warnerwu 2019-08-23 10:57 評論0 收藏0