文章目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
*{
margin:0;
padding:0;
}
html,body,#app{
height: 100%;
overflow: hidden;
}
.title{
height:60px;
background-color: #3c3c3c;
color: #E9E7E7;
text-align: center;
font-size: 24px;
line-height: 60px;
}
.page{
height: calc(100% - 60px - 40px);
}
.tabs{
height: 50px;
line-height: 30px;
background-color: #3c3c3c;
text-align: center;
position: relative;
}
.tabs-item{
float: left;
width: 25%;
text-align: center;
}
.tabs-item:hover{
cursor: pointer;
opacity: 0.6;
}
.tabs-active{
position: absolute;
width: 25%;
height: 100%;
background-color: #000;
color: #FFFFFF;
left: 0;
top: 0;
transition: all .3s;
}
.v-enter-active,.v-leave-active{
transition: all .3s;
}
.v-enter-to,.v-leave{
transform: translate(0);
}
.v-enter{
transform: translateX(100%);
}
</style>
</head>
<body>
<div id="app">
<div class="title">标题</div>
<transition mode="out-in">
<component :is="nowPage"></component>
</transition>
<div class="tabs">
<div class="tabs-item" v-for="(tab,index) in tabList" :key="index" @click="change(index,tab.content,tab.page)">{{tab.content}}</div>
<div class="tabs-active" :style="{'left':left}">{{title}}</div>
</div>
</div>
<template id="home">
<div style="background-color: pink" class="page">首页</div>
</template>
<template id="news">
<div style="background-color: red" class="page">新闻</div>
</template>
<template id="mine">
<div style="background-color: orange" class="page">我的</div>
</template>
<template id="about">
<div style="background-color: green" class="page">关于</div>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
tabList:[
{color:"pink",content:"首页",page:"home"},
{color:"orange",content:"新闻",page:"news"},
{color:"green",content:"我的",page:"mine"},
{color:"red",content:"关于",page:"about"},
],
nowPage:"mine",
title:"首页",
left:0,
},
methods: {
change(index,content,page){
this.nowPage = page;
this.title = content;
this.left = (index*25)+"%";
}
},
components:{
home:{
template:"#home",
},
news:{
template:"#news",
},
mine:{
template:"#mine",
},
about:{
template:"#about",
}
}
});
</script>
</html>