一.创建VUE3工程写移动端导航栏实例

1.1 项目大纲

需求：根据图片内容完成项目代码

先创建一个新的VUE项目，使用脚手架汇总vite方式创建。

项目主入口为App.vue（父），创建TabControl.vue（子）组件。

需要的图片放到：(本作业使用动态src绑定)

Vue3\01_TypeScript\03_Vue3\work-demo\src\assets

1.2 App.vue

1. template层：

div>
    
    tab-control :titles="titles" @titleClick="titleClick">
    /tab-control>
    
    h2>
{
{
 contents[currentIndex] }
}
    /h2>
    
/div>

解释：

tab-control是自定义标签，对应子组件。

:titles="titles"，将titles的值传给子组件。

@titleClick="titleClick"，点击事件，检查页面下标。

{ { contentscurrentIndex } } ：对应页面的内容。

1. JS代码层：

规范的VUE项目，这里应该写TS代码，由于企业课程没有讲ts所以这里使用JS。

import TabControl from './components/TabControl.vue';

export default {

  components: {

    TabControl
  }
, data() {

    return {

      titles: [{
 name: "首页", urld: 22, urlo: 27 }
, {
 name: "新品", urld: 23, urlo: 28 }
, {
 name: "逛", urld: 24, urlo: 29 }
,
      {
 name: "购物车", urld: 25, urlo: 30 }
, {
 name: "我的", urld: 26, urlo: 31 }
],
      contents: ["1", "2", "3", "4", "5"],
      currentIndex: 0
    }

  }
,
  methods: {

    titleClick(index) {
    
      this.currentIndex = index;

    }

  }

}
    

解释：

import TabControl from './components/TabControl.vue'; ：引入子组件

components-> TabControl：放行TabControl子组件

return ： 返回定义值。

methods：方法，这里写自定义函数，目的，获取子组件传参，进行改变页面内容。

[{ name: "首页", urld: 22, urlo: 27 } ：titles解释：name为导航栏文字，urld为未选中图标，urlo为选中图标。

1.3 TabControl.vue

1.template层：

div盒子的类名用驼峰命名法，将单词之间使用-连接，改为小写。

div class="tab-control-item" :class="{
 active: currentIndex === index }
    " v-for="(title, index) in titles"
            v-bind:key="title" @click="itemClick(index)">
    
            div v-if=" currentIndex === index">

                img :src="require(`@/assets/${
title.urlo}
    .png`)" alt="" style="width: 25px;
     height: 25px;
    ">
    br/>
    
            /div>
    
            div v-if=" currentIndex != index">

                img :src="require(`@/assets/${
title.urld}
    .png`)" alt="" style="width: 25px;
     height: 25px;
    ">
    br/>
    
            /div>
    
            span>
{
{
 title.name }
}
    /span>
    
        /div>

主要代码解释：

:class="{ active: currentIndex === index } ：主要作用于文字选中下标红色，如果currentIndex（当前页面下标）和index （循环下标）相同时，返回Ture，class标签新加active，下面css代码有所体现。

v-for="(title, index) in titles" v-bind:key="title" ：使用for循环，将父页面的titles进行循环渲染（5个按钮文字）。

@click="itemClick(index)：获取点击事件，获取当前页面下标。

下方代码解释：

使用判断语句，继续筛选渲染，如果下标相同说明选中改图标，显示选中图标，反之选中正常图标。

特殊说明：img标签在一开始发现无法正确的获取到地址，然后使用src动态绑定的方法，见下方代码：

div v-if=" currentIndex === index">

    img :src="require(`@/assets/${
title.urlo}
    .png`)" alt="" style="width: 25px;
     height: 25px;
    ">
    br/>
    
/div>
    
div v-if=" currentIndex != index">

    img :src="require(`@/assets/${
title.urld}
    .png`)" alt="" style="width: 25px;
     height: 25px;
    ">
    br/>
    
/div>

2.JS层：

export default {

    emits: ["titleClick"],
    props: {

        titles: {

            type: Array,
            default() {

                return []
            }

        }

    }
,
    data() {

        return {

            currentIndex: 0
        }

    }
,
    methods: {

        itemClick(index) {
    
            console.log(this.currentIndex);
    
            this.currentIndex = index;
    
            this.$emit("titleClick", index);

        }

    }
    

解释：

props：一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute

这里声明titles。

数据返回当前选中页面的下标。

methods：获取到当前页面下标，返回值给父组件。

3.CSS：CSS没有什么需要解释的。

style scoped>

.tab-control {
    
    display: flex;
    
    flex-wrap:wrap;

}


.tab-control-item {
    
    flex: 1;
    
    text-align: center;

}


.tab-control-item.active {
    
    color: red;

}


.tab-control-item.active span {
    
    border-bottom: 3px solid red;
    
    padding: 5px 10px;

}
    
/style>
    

二.效果展示

测试没有问题，写的时候吧内容放到了下面，不过功能已经实现，这个并不重要，介意的直接把app.vue里的内容和导航栏互换一下位置，然后把导航栏进行一个绝对定位即可完成。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！