点击滚动条

<template>
  <div class="big">
    <!-- 左边导航 -->
    <div class="left">
      <ul>
        <li
          v-for="(k, i) in arr"
          :key="k.name"
          @click="fun3(i, k.name)"
          :class="index === i ? 'bgc-ccc' : ''"
        >
          {{ k.name }}
        </li>
      </ul>
    </div>
    <!-- 右边套餐 -->
    <div class="right list-right">
      <ul>
        <li v-for="v in arr" :key="v.name" :id="v.name">
          <h3>{{ v.name }}</h3>
          <ul>
            <li v-for="item in v.foods" :key="item.id">
              <img :src="item.imgUrl" alt="" />
              <div>
                <h4>{{ item.name }}</h4>
                <p>{{ item.goodsDesc }}</p>
                <p>月售{{ item.sellCount }}份 好评率{{ item.rating }}%</p>
                <p>
                  ￥<span>{{ item.price }}</span> ￥<s>28</s>
                </p>
                <van-stepper
                  min="0"
                  default-value="0"
                  v-model="item.value"
                  theme="round"
                  button-size="22"
                  disable-input
                  :show-minus="!!item.value"
                  :show-input="Boolean(item.value)"
                  @plus="ADD_DATA(item)"
                />
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { commodityList } from '../../api/user'
// 引入scroll 优化滚动条
import BetterScroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      arr: [],
      left: {},
      right: {},
      index: 0,
      rollH: []
    }
  },
  created() {
    this.fun1()
  },
  mounted() {
    setTimeout(() => {
      this.fun2()
    }, 300)
  },
  methods: {
    ...mapMutations(['ADD_DATA']),
    async fun1() {
      const { goodsList } = await commodityList()
      this.arr = goodsList
      console.log(this.arr)
    },
    fun2() {
      let min = 0
      for (const k of this.arr) {
        const ID = document.getElementById(k.name).offsetHeight
        this.rollH.push({
          min: min,
          max: ID + min,
          name: k.name
        })
        min += ID
      }
      // 滚动的效果
      this.left = new BetterScroll('.left', {
        click: true
      })
      this.right = new BetterScroll('.list-right', {
        probeType: 3
      })
      // 获取每个滚动的位置
      this.right.on('scroll', ({ y }) => {
        y = Math.abs(y)
        for (const v of this.rollH) {
          if (y >= v.min && y < v.max) {
            this.index = this.arr.findIndex(item => item.name === v.name)
          }
        }
      })
    },
    fun3(i, name) {
      this.index = i
      const elBox = document.getElementById(name)
      this.right.scrollToElement(elBox, 200)
    }
  },
  watch: {
    chooseData() {
      console.log(this.chooseData)
    }
  }
}
</script>

<style lang="less" scoped>
.big {
  display: flex;
  height: 400px;
  overflow: hidden;
  .left {
    flex: 0 0 100px;
    height: 400px;
    border-right: 1px solid #ccc;
    // background-color: rgb(255, 161, 161);
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      li {
        line-height: 40px;
      }
    }
  }
  .bgc-ccc {
    background-color: rgb(238, 238, 238);
  }
  .right {
    flex: 1;
    > ul {
      h3 {
        line-height: 30px;
        margin-left: 10px;
      }
      ul {
        li {
          height: 180px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ccc;
          background-color: #fff;

          &:last-child {
            border-bottom: none;
          }
          img {
            height: 80px;
            margin-right: 10px;
            margin-left: 8px;
          }
          div {
            h4 {
              font-size: 12px;
              font-weight: 700;
              line-height: 20px;
            }
            > p {
              font-size: 12px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>