分類點選到商品指定位置

data新增currentIndex

data() {
    return {
        active: 0,
        categories: [],
        positions: [],
        currentIndex: 0
    };

mounted頁面載入完成計算positions

mounted(){
    const categories = kfc['categories'];
    // for (let index=0; index < categories.length; index++){
    //   const category = categories[index];
 

    //   this.categories.push({id:category.id,name:category.name})
    // }
    this.categories = categories
    this.$nextTick(() => {
      var menuScroll = new BScroll(this.$refs.category,{
      scrollY: true,
      click: true
    })
      var goodsScroll = new BScroll(this.$refs.goods,{
      scrollY: 
 
true,
      click: true
    })
    this.menuScroll = menuScroll;
    this.goodsScroll = goodsScroll;

    const positions = [0];
    let offset = 0;
    const dlList = document.getElementsByClassName('goods-dl');
    for(let dl of dlList){
      const height = dl.clientHeight;
      offset += height;
      positions.push(offset);
    }
    
 
this.positions = positions;
    })
  },

給分類新增點選滾動方法

methods: {
    categoryClick(index){
      const position = this.positions[index]
      // 滾動的時候，如果想要望上面滾動 y要為負數
      this.goodsScroll.scrollTo(0, -position, 500)
      this.currentIndex = index
    }

點選事件和點選高亮

<li v-for="(category, index) in categories" :key="category.name" @click="categoryClick(index)" :class="index==currentIndex?'active':''">
                {{category.name}}
</li>

css高亮樣式新增

li{
          height: 50px;
          line-height: 50px;
          &.active{
            background-color: #ccc;
          }

效果圖