vue tabBar导航栏设计实现1-初步设计

系列导航

1、 tabBar导航栏设计1

一、本节目标效果

二、项目创建

参考如下博客地址创建一个vue的项目

https://www.cnblogs.com/yclh/p/15356171.html （vue学习笔记二、环境搭建+项目创建）

三、代码结构

注：主要是标红的几个文件

四、代码

重新编写这几个文件中的代码

App.vue

四、效果

1、运行程序

注:要进入到相应的路劲下

启动成功后：

2、浏览器打开http://localhost:8080/见到最除的效果

五、代码按照步骤解释

注：代码都在App.vue里

<template>
  <div  id="app">
     <div id ="tab_bar">
     <div  class="item">首页</div>
     <div  class="item">分类</div>
     <div  class="item">购物车</div>
     <div  class="item">我的</div>
     </div>
  </div>
</template>
 
  
<style lang="scss">
     
    body {
      padding: 0;
      margin: 0;
    }
     
    #tab_bar {
      display: flex;  //水平分布
      background-color: #f6f6f6;  //背景色
      
  
      position: fixed;  //相对于浏览器窗口进行定位 
      left: 0;          //这三个设置让文字到手机底部
      right: 0;
      bottom: 0;
         
       box-shadow: 0 -1px 1px rgba(100,100,100,.2);  //背景框的渐变色
    }
     
     
    .item{
        flex: 1; //等分
        text-align: center; //等分后居中
        height: 49px; //设置高度
        font-size: 14px; //设置字体大小
    }
  
  
</style>
 
<script>
  //编写js内容 
import {defineComponent} from 'vue'
export default defineComponent({
    //组件名称
    name:'App',
    //接收父组件的数据
    props:{
    },
    setup(props,ctx){
        return{   
        }
    }    
})
</script>