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>

1、写出如下的内容