摘要：的組件化功能可謂是它的一大亮點(diǎn)，通過(guò)將頁(yè)面上某一組件的代碼放入一個(gè)的文件中進(jìn)行管理可以大大提高代碼的維護(hù)性。項(xiàng)目中未做移動(dòng)端適配，在不同屏幕手機(jī)上打開(kāi)，可能用戶(hù)體驗(yàn)會(huì)差些

注意：如果gif動(dòng)態(tài)圖看不了，麻煩大家點(diǎn)擊github美團(tuán)項(xiàng)目中mt-app/src/assets/美團(tuán).gif便可以觀看！

本項(xiàng)目很適合vue初學(xué)者，如果業(yè)務(wù)邏輯看不懂，很歡迎一起討論！

源碼地址：mt-app，歡迎 star 和 fork

如果對(duì)你有些許幫助，不妨點(diǎn)贊、關(guān)注我一下啊

vue全家桶：Vue、Vue-router、Vue-cli等

組件化：?jiǎn)蜼ue文件

模塊化：ES6 Module

第三方模塊：better-scroll axios等

基礎(chǔ)開(kāi)發(fā)環(huán)境和包管理：Node、npm

構(gòu)建工具：webpack

編輯器：webstrom

一言而蔽之：一款集點(diǎn)菜、用戶(hù)評(píng)價(jià)和商家信息為一體的移動(dòng)端點(diǎn)餐APP
1.點(diǎn)餐頁(yè)面
點(diǎn)選商品后自動(dòng)添加到購(gòu)物車(chē)，并計(jì)算好總價(jià)，在商品列表、購(gòu)物車(chē)列表和商品詳情頁(yè)都可以隨意增減數(shù)目，此外左側(cè)商品分類(lèi)和右側(cè)的商品相互關(guān)聯(lián)，通過(guò)better-scroll插件滑動(dòng)商品列表時(shí)，相應(yīng)的商品分類(lèi)也會(huì)跟著跳轉(zhuǎn)。
2.用戶(hù)評(píng)價(jià)頁(yè)面
主要包括一個(gè)TAB欄，包括三部分：全部、有圖和評(píng)價(jià)三個(gè)模塊
3.商家信息頁(yè)面
主要介紹一些商家基本信息，可以通過(guò)better-scroll插件，進(jìn)行左右滑動(dòng)圖片

該項(xiàng)目業(yè)務(wù)邏輯主要集中在點(diǎn)餐模塊，而點(diǎn)餐模塊中難點(diǎn)便是如何實(shí)現(xiàn)商品列表滑動(dòng)，以及右側(cè)商品分類(lèi)和左側(cè)商品列表如何聯(lián)動(dòng)？

首先要實(shí)現(xiàn)商品列表的滑動(dòng)，就需要用到一個(gè)better-scroll插件，better-scroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件。

安裝better-scroll npm install better-scroll --save

在Good.vue文件中script引入import BScroll from "better-scroll"

這些準(zhǔn)備工作做好后，實(shí)現(xiàn)左右兩邊列表聯(lián)動(dòng)，總結(jié)起來(lái)有以下四個(gè)步驟：
1. 計(jì)算商品分類(lèi)的區(qū)間高度

//template部分
  
    

      

        
        

          

            
          
        
        
        

          
{{item.name}}
          
          

            

            ......

//JS部分
methods:{
  calculateHeight() {   // 計(jì)算分類(lèi)的區(qū)間總高度(包括專(zhuān)場(chǎng)和所有具體分類(lèi)的總高)
        let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
        let height = 0
        this.listHeight.push(height)
        for (let i = 0; i < foodlist.length; i++) {
          let item = foodlist[i]
          height += item.clientHeight    // 累加
          this.listHeight.push(height)
        }
        console.log(this.listHeight)//[0, 43, 1231, 2401, 3589, 4451, 6121, 7656, 8497, 9344, 10080]
      }，
   initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuScroll, {  //實(shí)例化
          click: true  //點(diǎn)擊事件才能生效
        })
        this.foodScroll = new BScroll(this.$refs.foodScroll, {
          probeType: 3,
          click: true
        })
},
   created() {
      fetch("/api/goods")
        .then(res => res.json())
        .then(response => {
          if (response.code == 0) {
           this.container = response.data.container_operation_source
           this.goods = response.data.food_spu_tags
           this.poiInfo = response.data.poi_info 
           this.$nextTick(() => {  //在created中數(shù)據(jù)雖已初始化，但dom未生成，頁(yè)面還沒(méi)顯示，要使用回調(diào)函數(shù)，確保DOM已經(jīng)更新
           this.initScroll()        // 執(zhí)行滾動(dòng)方法
           this.calculateHeight() //調(diào)用計(jì)算分類(lèi)區(qū)間高度的方法
            })
          }
        })
    }

2. 監(jiān)聽(tīng)滾動(dòng)的位置

initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuScroll)
        this.foodScroll = new BScroll(this.$refs.foodScroll, {
          probeType: 3，//在屏幕滑動(dòng)的過(guò)程中實(shí)時(shí)派發(fā) scroll 事件
         click:true//點(diǎn)擊事件才能生效
        })
        //foodScroll監(jiān)聽(tīng)事件
        this.foodScroll.on("scroll", (pos) => {
          this.scrollY = Math.abs(pos.y)
          console.log(this.scrollY)
        })
      }

3. 根據(jù)滾動(dòng)位置確認(rèn)下標(biāo)，與左側(cè)對(duì)應(yīng)

computed:{
    currentIndex(){
      for(let i = 0; i < this.listHeight.length; i++){
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i+1] // 獲取商品區(qū)間的范圍
        if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
          return i;    // 是否在上述區(qū)間中
        }
      }
      return 0
    }

        

          

            
            {{container.tag_name}}
          
        
        

4. 通過(guò)下標(biāo)實(shí)現(xiàn)點(diǎn)擊左側(cè)，滾動(dòng)右側(cè)

//同一個(gè)函數(shù)傳值不一樣

 selectMenu(index) {
        let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
        let element = foodlist[index]
        this.foodScroll.scrollToElement(element, 250)
      }

vue數(shù)據(jù)和視圖的分離,以數(shù)據(jù)驅(qū)動(dòng)視圖，只關(guān)心數(shù)據(jù)變化，DOM操作被封裝，在實(shí)際開(kāi)發(fā)過(guò)程中大大提高了效率。

Vue的組件化功能可謂是它的一大亮點(diǎn)，通過(guò)將頁(yè)面上某一組件的html、CSS、JS代碼放入一個(gè).vue的文件中進(jìn)行管理可以大大提高代碼的維護(hù)性。

項(xiàng)目中未做移動(dòng)端適配，在不同屏幕手機(jī)上打開(kāi)，可能用戶(hù)體驗(yàn)會(huì)差些