vue 饿了么菜单左右联动

最近写了一个小demo ,饿了么菜单左右联动效果，由于公司的后台太差劲，到现在还没有给我接口文档，就用本地数据写了一下，写得注释超级详细 ，主要是点击左侧右侧可以滑动到指定位置，滑动右侧左侧联动效果，回弹动画效果，别的还没有写，直接上代码 有需要改进的地方，欢迎各位提出宝贵的意见
基于better-scroll 做的 首先需要下载

npm install better-scroll --save

<template>
  <div class="goods">
     <div class="menu-wrapper" ref="menuWrapper">
       <ul>
         <li v-for="(item,index) in goods" class="menu-item" :class="{current: currentIndex === index}" @click="selectMenu(index)" :key="index">
           <span class="text border-1px">{{item.name}}</span>
         </li>
       </ul>
     </div>
     <div class="foods-wrapper" ref="foodsWrapper">
       <ul>
         <li v-for="item in goods" class="food-list food-list-hook" :key="item.id">
           <h1 class="title">{{item.name}}</h1>
           <ul v-for="food in item.foods" class="food-item border-1px" :key="food.id">
             <div class="icon" @click="selectFood(food)">
               <img width="57" height="57" :src="food.icon">
             </div>
             <div class="content">
               <h2 class="name">{{food.name}}</h2>
               <p class="description">{{food.description}}</p>
               <div class="extra">
                 <span class="count">月售{{food.sellCount}}份</span><span class="rating">好评率{{food.rating}}%</span>
               </div>
               <div class="price">
                 <span class="now">￥{{food.price}}</span><span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
               </div>
               
               <div class="cart-wrapper">
               
               </div>
             </div>
           </ul>
         </li>
       </ul>
     </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Datas from '../../common/json/data'
export default {
  
  data () {
    return {
      goods: [],
      listHeight: [],
      scrollY: 0,
     
    }
  },
  computed: {
    // 计算得到当前分类下标
    currentIndex () {
    //第一种写法 有点繁琐 不推荐
    //   for (let i = 0; i < this.listHeight.length; i++) {
    //     let height1 = this.listHeight[i]
    //     let height2 = this.listHeight[i + 1]
    //     if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
    //       return i
    //     }
    //   }
    //   return 0
        //  解构赋值 
      
    // 第二种写法已改进   根据条件计算 产生一个结果 findIndex查找满足条件的下标 没找到返回-1
      const index=this.listHeight.findIndex((item,index)=>{
        //   如果滚动的距离>=左侧列表当前的高度并且 小于下一项的高度 
          return this.scrollY>=item && this.scrollY<this.listHeight[index + 1]
      })
     
        return index
    },
  },
  created () {
  this.goods=Datas.goods
  
  },
  mounted () {
    //   这里用到一个定时器 等待数据渲染完毕 执行该方法 不然不能滑动 如果是真实数据 这两个方法放在this.$nextTick()里面
    //因为没有真实数据 只能用本地数据模拟下
    setTimeout(() => {
      this._initScroll()
      this._calculateHeight()
    }, 20)
  },
  methods: {
        //     设置两边列表可以滚动  内容区要比外层容器要高  列表先渲染 才可以滑动 
    _initScroll () {
        
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true
      })
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        click: true,
        probeType: 2
      })
    //    右侧表绑定滑动监听 
      this.foodsScroll.on('scroll', (pos) => {
        //  获取每次滚动的值 绝对值
        this.scrollY = Math.abs(Math.round(pos.y))
      })
      //  右侧列表绑定滑动结束监听
      this.foodsScroll.on('scrollEnd', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y))
        console.log(this.scrollY)
      })
    },
    
          
    _calculateHeight () {
        // 获取 所有左侧列表li  class 为 food-list-hook ul设置ref 
      let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')

          let height=0;
          this.listHeight.push(height)
      // 第一种写法 有点繁琐 不推荐 
        //  定义初始值 li可见高度为 0  
    //   let height = 0
    // //   初始值0 添加到listHeight数组
    //   this.listHeight.push(height)
    // //   循环遍历所有左侧列表 得到所有li可视区域高度 
    //   for (let i = 0; i < foodList.length; i++) {
    //     let item = foodList[i]
    //         // 高度+= 左侧列表当前项的可视高度
    //     height += item.clientHeight
    //     //  收集左侧列表所有li可见区域高度
    //     this.listHeight.push(height)
    //   }

        // 第二种写法以改进  伪数组转为真数组 并循环遍历
          Array.prototype.slice.call(foodList).forEach((i) =>{
               height += i.clientHeight
                 this.listHeight.push(height)
          })
    
    },
    //  点击左侧列表 右侧列表滑动到指定位置
    selectMenu (index) {
    
      let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
    //   scrollToElement可以滑动到指定位置
      this.foodsScroll.scrollToElement(foodList[index],300)
    //    第一个参数对应的食品列表 
    //  第二个参数为滑动 动画时长
    },
  
  }
  
}
</script>

<style lang="scss" scoped>
    .goods{
    position: absolute;
    top: 176px;
    bottom: 44px;
    width: 100%;
    max-width: 540px;
    display: flex;
    overflow: hidden;
    .menu-wrapper{
    flex: 0 0 80px;
    background: #f3f5f7;
    }
    }
    .menu-item{
    width: 56px;
    height: 54px;
    display: table;
    font-size: 12px;
    line-height: 14px;
    padding: 0 12px;
    font-weight: 200;
    &:last-child{
    .text:after{
    border-top: none;
    }          
    }
    &.current{
    position: relative;
    background: #fff;
    font-weight: 700;
    margin-top: -1px;
    color: aquamarine;
    z-index: 100;
    .text:after{
    border-top: 0;
    }           
    }
    .text{
    display: table-cell;
    vertical-align: middle;
    width: 56px;
    font-size: 12px;   
    .icon{
    vertical-align: top;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    }
    }  
    }
    .foods-wrapper{
    flex: 1;
    .title{
    border-left: 2px solid #d9dde1;
    font-size: 12px;
    width: 420px;
    height: 26px;
    line-height: 26px;
    padding-left: 10px;
    margin-left: 12PX;
    background:#f0f0f0;
    color: rgb(147,153,159);
    p{
    background-color: #f3f5f7;
    }
    }      
        
    .food-item{
    display: flex;
    margin: 18px;
    padding-bottom: 18px;
    border:rgba(7,17,27,.1) 1PX solid;
    &:last-child:after{
        border-top: 0;
    }
            
    .icon{
    flex: 0 0 57px;
    margin-right: 10px;
    }
    .content{
        flex: 1;
    }       
    .name{
    margin: 2px 0 8px 0;
    line-height: 14px;
    font-size: 14px;
    color: rgb(7,17,27);
    }                  
    .description,.extra{
    font-size: 10px ;
        line-height: 10px;
        color: rgb(147,153,159);
        margin-bottom: 8px;         
    }         
    .extra{
    .count{
    margin-right: 12px;
    line-height: 10px;
    }
    }      
    .rating{
    line-height: 10px;
    }        
    .price{
    .now{
    font-size: 14px;
    color: rgb(240,20,20);
    font-weight: 700;
    line-height: 24px;
    margin-right: 8px;
    }
    }                   
    .old{
        font-size: 10px;
        text-decoration: line-through;
        color: rgb(147,153,159);
        font-weight: 700;
        line-height: 24px;
        }          
        .cart-wrapper{
            position: absolute;
            right: 0;
            bottom: 12px;
            }
        }
        }                            
</style>

不知道咋个搞那种效果动图，那个会可以教下我么。。。。。