アプリプロジェクトのページの下部のナビゲーションをすばやくレイアウトする

実際、これはCSSスタイルのレイアウトです。


カプセル化されたナビゲーションバーコンポーネントをAppファイルに導入し、スタイルを記述することを忘れないでください。

Navファイルのコードは次のとおりです。

<template>
<!-- 计算属性的导航 -->
  <div class="nav">
    <ul>
      <li @click="selectIndex = 0" :class="{ active: selectIndex == 0 }">
        <img :src="iconHome" alt="" />
        <span>首页</span>
      </li>
      <li @click="selectIndex = 1" :class="{ active: selectIndex == 1 }">
        <img :src="iconList" alt="" />
        <span>分类</span>
      </li>
      <li @click="selectIndex = 2" :class="{ active: selectIndex == 2 }">
        <img :src="iconQuan" alt="" />
        <span>米圈</span>
      </li>
      <li @click="selectIndex = 3" :class="{ active: selectIndex == 3 }">
        <img :src="iconShop" alt="" />
        <span>购物车</span>
      </li>
      <li @click="selectIndex = 4" :class="{ active: selectIndex == 4 }">
        <img :src="incoMe" alt="" />
        <span>我的</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // 计算属性一定要有return返回值
  computed: {
    iconHome() {
      return this.selectIndex == 0
        ? this.nav.icons.home.selected
        : this.nav.icons.home.default;
    },
    iconList() {
      return this.selectIndex == 1
        ? this.nav.icons.list.selected
        : this.nav.icons.list.default;
    },
    iconQuan() {
      return this.selectIndex == 2
        ? this.nav.icons.circle.selected
        : this.nav.icons.circle.default;
    },
    iconShop() {
      return this.selectIndex == 3
        ? this.nav.icons.shop.selected
        : this.nav.icons.shop.default;
    },
    incoMe() {
      return this.selectIndex == 4
        ? this.nav.icons.mine.selected
        : this.nav.icons.mine.default;
    },
  },
  data() {
    return {
      nav: {
        icons: {
          home: {
            default: require("../assets/home.png"),
            selected: require("../assets/homes.png"),
          },
          list: {
            default: require("../assets/fenlei.png"),
            selected: require("../assets/fenleis.png"),
          },
          circle: {
            default: require("../assets/mi.png"),
            selected: require("../assets/mis.png"),
          },
          shop: {
            default: require("../assets/shop.png"),
            selected: require("../assets/shops.png"),
          },
          mine: {
            default: require("../assets/me.png"),
            selected: require("../assets/mes.png"),
          },
        },
      },
      selectIndex: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 46px;
  border-top: 0.02rem solid #999;
  ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex; // 弹性布局
      flex-direction: column; // 竖排
      align-items: center; // 上下居中
      justify-content: center; // 左右居中
      font-size: 0.8rem;
      font-weight: bold;
    }
    li.active {
      color: #d81e06;
    }
  }
  img {
    width: 24px;
  }
}
</style>

OK、それはとても気まぐれです