無(wú)圖無(wú)真相！Ｇ！

lz-menu1.gif

缺點(diǎn)： 無(wú)法自動(dòng)滾動(dòng)，無(wú)法外部傳遞參數(shù)控制顏色等

請(qǐng)參考升級(jí)版 點(diǎn)擊選項(xiàng)自動(dòng)居中

開(kāi)發(fā)環(huán)境

vue 2.x
scss

組件 LzMenu.vue

<template>
  <div class="wrapper">
    <div class="my-inbox" ref="box">
      <span
        class="item"
        v-for="(item, index) in menuItems" :key="index"
        v-bind:class="{active: index == currentIndex}"
        @click="clickMenuItem(index)"
        >{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "lz-menu",
  props: {
    menuItems: Array,
    selectedIndex: 0,
  },
  data() {
    return {
      normalColor: "#fff",
      activeColor: "#f00",
      currentIndex: 0,
    };
  },
  onMounted() {
    currentIndex = selectedIndex;
  },
  methods: {
    getStyle(normal) {
      return {
        color: normal ? this.normalColor : this.activeColor,
      };
    },
    clickMenuItem(idx) {
      if (this.currentIndex != idx) {
        let inbox = this.$refs.box;
        this.currentIndex = idx;
        console.log("點(diǎn)擊index: " + idx);
        this.$emit('clickLzMenuItem', this.menuItems[idx]);

      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  background-color: #f2f2f2;
  width: 100%;
  .my-inbox {
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100%;
    white-space: nowrap;
    .item {
      display: inline-block;
      height: 2rem;
      line-height: 2rem;
      margin: 0.5rem;
      padding: 0px 0.8rem;
      text-align: center;
    }
    .active {
      background-color: rgb(7, 177, 35);
      font-weight: bold;
      border-radius: 25px;
      color: #fff;
    }
  }
}
</style>

使用

<template>
  <div>
    <lz-menu :menuItems="menuItems" @clickLzMenuItem="clickMenuItem" />
  </div>
</template>

<script>
import LzMenu from "../components/LzMenu.vue";
export default {
  components: {
    LzMenu,
  },
  name: "Setting",
  data() {
    return {
      menuItems: [
        {
          id: 1,
          name: "第 1 個(gè)",
        },
        {
          id: 2,
          name: "第 2 個(gè)",
        },
        {
          id: 3,
          name: "第 3 個(gè)",
        },
        {
          id: 4,
          name: "第 4 個(gè)",
        },
        {
          id: 5,
          name: "第 5 個(gè)",
        },
        {
          id: 6,
          name: "第 6 個(gè)",
        },
        {
          id: 7,
          name: "第 7 個(gè)",
        },
        {
          id: 8,
          name: "第 8 個(gè)",
        },
      ],
    };
  },
  methods: {
    clickMenuItem: function(item) {
      console.log(item.name);
    }
  },
};
</script>

<style>
</style>