<template><div class="goods">  <!--左側(cè)區(qū)域-->  <div class="menu-wrapper" ref="left">    <ul class="menu">      <li class="menu-item border-bottom"        :class="{'current':currentIndex===index}"        v-for="(item,index) in dataLlist.goods"        :key="index"        @click="selectIndex(index,$event)"        ref="menuList"      >        <div class="text">          <goods-icon v-show="item.type>0" :index="item.type" class="text-ico"></goods-icon>          {{item.name}}        </div>      </li>    </ul>  </div>  <!--右側(cè)區(qū)域-->  <div class="foods-wrapper" ref="right">    <ul>      <li class="food-list food-list-hook"        v-for="(item,index) in dataLlist.goods"        :key="index">        <!--標(biāo)題區(qū)域-->        <h1 class="border-left">{{item.name}}</h1>        <ul>          <li class="food-item border-bottom"            v-for="(foodItem,index) in item.foods"          >            <div class="food-image">              <img :src="foodItem.icon" alt="foodItem.name">            </div>            <div class="food-desc">              <div class="title">{{foodItem.name}}</div>              <div class="desc">{{foodItem.description}}</div>              <div class="num">                <div class="sellCount">月售{{foodItem.sellCount}}份</div>                <div class="rating">好評(píng)率{{foodItem.rating}}%</div>              </div>              <div class="price">                <div class="new-price">￥{{foodItem.price}}</div>                <div class="old-price border-bottom" v-show="foodItem.oldPrice">￥{{foodItem.oldPrice}}</div>              </div>            </div>          </li>        </ul>      </li>    </ul>  </div></div></template><script>import Icon from '../../common/iconType/Icon';import BScroll from 'better-scroll'export default {  name: "Goods",  props:['dataLlist'],  data(){    return{      listHeight:[],      scrollY:0 ,//為了實(shí)現(xiàn)左右區(qū)域映射    }  },  computed:{    currentIndex(){ //這個(gè)返回的是下標(biāo)，當(dāng)這個(gè)currentIndex的值與goods的下標(biāo)一致的時(shí)候，      // 左側(cè)區(qū)域就會(huì)呈現(xiàn)高亮現(xiàn)象      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)) {          this._followScroll(i) //實(shí)現(xiàn)當(dāng)滑動(dòng)的時(shí)候，左側(cè)隱藏的食物類型顯示          return i;        }      }      return 0;    }  },  created(){    //dataLlist數(shù)據(jù)是異步加載，直接用new BScroll時(shí)，dom可能還沒有更新    this.$nextTick(()=>{ //this.$nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行，使用$nextTick異步初始化Bscroll      this.meunScroll=new BScroll(this.$refs.left,{        click:true      });      this.foodScroll=new BScroll(this.$refs.right,{        probeType: 3 //可以派發(fā)scroll事件，檢測到實(shí)時(shí)滾動(dòng)的位置      });      this.foodScroll.on('scroll',(pos) =>{        //參數(shù)pos就是在右側(cè)區(qū)域滑動(dòng)的實(shí)時(shí)位置        //Math.round()取整數(shù),Math.abs取絕對(duì)值        this.scrollY =Math.abs( Math.round(pos.y));      });      this._calculateHeight(); //這個(gè)方法為了獲取每個(gè)商品類的最大區(qū)間的高度    })  },  methods:{    _followScroll(index) {      if(index > 0 ){        let menuList = this.$refs.menuList;        let el = menuList[index];        this.meunScroll.scrollToElement(el, 300, 0, -100);//better-scroll的scrollToElement方法滾動(dòng)到指定位置      }      },    _calculateHeight(){ //這個(gè)方法為了獲取每個(gè)商品類的最大區(qū)間的高度     let height = 0;     let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');     this.listHeight.push(height); //listHeight這個(gè)數(shù)組是用來存放右側(cè)商品中每個(gè)類型商品的最大區(qū)間高度的集合     for(var i=0;i<foodLsit.length;i++){       let item = foodLsit[i];       //clientHeight代表元素的高度       height += item.clientHeight; //每個(gè)元素的高度等于自身高度加上上一個(gè)元素的高度       this.listHeight.push(height); //最終listHeight集合了所有l(wèi)i[類為food-list-hook]到最頂部的高度     }    },    selectIndex(index,ele){      //better-scroll 會(huì)禁止移動(dòng)端的點(diǎn)擊事件，需要重新派發(fā)，同時(shí)在PC端會(huì)點(diǎn)擊兩次，此處需要做判斷      if(!ele._constructed){        //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點(diǎn)擊事件的event有個(gè)        // 屬性區(qū)別_constructed，pc端瀏覽器的點(diǎn)擊事件的event中是沒有這個(gè)屬性的        return;      }      let rightItem =this.$refs.right.getElementsByClassName('food-list-hook');      let item = rightItem[index]; //找到相應(yīng)的li      this.foodScroll.scrollToElement(item, 250) //better-scroll的scrollToElement方法滾動(dòng)到指定位置    }   // scrollToElement(el, time, offsetX, offsetY, easing) //第一個(gè)值接收目標(biāo)元素，第二個(gè)是滾動(dòng)時(shí)間，第三第四個(gè)是相對(duì)于目標(biāo)元素的偏移量。},  components:{    'goods-icon': Icon  }}</script><style scoped lang="stylus">@import "../../assets/stylus/mixin.styl".goodsposition absolutetop 3.6rembottom .92remdisplay flexwidth: 100%overflow: hidden.menu-wrapper  flex 0 0 1.6rem  width 1.6rem  background-color #f3f5f7  .menu-item    height 1.08rem    display flex    align-items center    justify-content left    &.border-bottom::before       color rgba(7,17,27,.1)    .text      font-weight 200      font-size .24rem      line-height .28rem      margin 0 .24rem      .text-ico         margin-right -.08rem         vertical-align top;    &.current      font-size .24rem      line-height .28rem      color rgb(240,20,20)      background-color #ffffff.foods-wrapper  flex 1  .food-list    h1      width 100%      height .52rem      line-height .52rem      padding-left .28rem      background-color #f3f5f7      font-size .24rem      color rgb(147,153,159)      &.border-left::before        border-color #d9dde1        border-width .1rem    .food-item      display flex      padding .36rem      &:last-child.border-bottom        border none      .food-desc        margin-left .2rem        font-size .2rem        color rgb(147,153,159)        .title          font-size:.28rem          color rgb(7,17,27)          margin-top .04rem          line-height .28rem        .desc          margin .15rem auto          line-height:.28rem        .num          display flex          margin 0 0 .16rem 0          .sellCount             margin-right .24rem        .price          display flex          align-items center          .new-price            color rgb(220,20,60)            font-weight 700            line-height .48rem            margin-right .16rem            font-size .28rem          .old-price            &.border-bottom::before              position absolute              top: 25%;              border-width: 0.08rem;</style>

npm install better-scroll --save

this.meunScroll=new BScroll(this.$refs.left);this.foodScroll=new BScroll(this.$refs.right);

 this.$nextTick(()=>{ //this.$nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行，使用$nextTick異步初始化Bscroll      this.meunScroll=new BScroll(this.$refs.left,{        click:true //左側(cè)菜單可以進(jìn)行點(diǎn)擊事件      });      this.foodScroll=new BScroll(this.$refs.right,{        probeType: 3 //可以派發(fā)scroll事件，檢測到實(shí)時(shí)滾動(dòng)的位置      });      【this.foodScroll中必須有 probeType: 3后才能進(jìn)行下面的scroll事件】      this.foodScroll.on('scroll',(pos) =>{        //參數(shù)pos就是在右側(cè)區(qū)域滑動(dòng)的實(shí)時(shí)位置        //Math.round()取整數(shù),Math.abs取絕對(duì)值        this.scrollY =Math.abs( Math.round(pos.y));      });      this._calculateHeight(); //這個(gè)方法為了獲取每個(gè)商品類的最大區(qū)間的高度    })

     let height = 0;     let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');     this.listHeight.push(height); //listHeight這個(gè)數(shù)組是用來存放右側(cè)商品中每個(gè)類型商品的最大區(qū)間高度的集合     for(var i=0;i<foodLsit.length;i++){       let item = foodLsit[i];       //clientHeight代表元素的高度       height += item.clientHeight; //每個(gè)元素的高度等于自身高度加上上一個(gè)元素的高度       this.listHeight.push(height); //最終listHeight集合了所有l(wèi)i[類為food-list-hook]到最頂部的高度     }    },let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');