vue 底部导航组件

不喜欢罗里吧嗦，拿过去直接能用：

<template>
    <div class="footer">
		<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)" :key='index'>
			<img class="img" :src="index===idx?item.iconSelect:item.icon">
			<p :class="['colorChange',{on:index===idx}]" >{{item.name}}</p>
		</div>
 
	</div>
</template>
<script>
export default{
		props:['idx'],
		data(){
			return {
				items:[
				{
					cls:"myCourse",
					push:"/myCourse",
					icon:'stiao-26.png',
					iconSelect:'stiao-23.png'
        },
        {
					cls:"myCourse",
					push:"/",
					icon:'stiao-25.png',
					iconSelect:'stiao-22.png'
				},
				{
					cla:"mine",
					push:"/myCenter",
					icon:'stiao-24.png',
					iconSelect:'stiao-21.png'
				}]
			}
		}
	} 

</script>
<style lang="scss" scope>
.footer{
	font-size: .24rem ;
  color:red;
  position: fixed;
  bottom: 0;
  width: 100%;
  height:1rem ;
  display: flex;
  border-top: 1px #f2f2f2 solid;
  }
	div{
		flex: 1;
	}
	div img{
		width: 1.08rem;
    margin: 0 auto;
    height: .80rem;
    flex: 1;
    margin-top: .1rem;
	}
</style>

组件写好后，直接引入

 <public-footer :idx="1"></public-footer>

啰嗦一句，idx是用来判断到了哪个页面的参数