vue 饿了么菜单左右联动

爱被打了一巴掌 2023-06-19 06:55 12阅读 0赞

最近写了一个小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>

不知道咋个搞那种效果动图，那个会可以教下我么。。。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205012556832.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1,size_16,color_FFFFFF,t_70