如图所示
<template>
<div class="home" @touchmove.prevent @mousewheel.prevent>
<div class="header">
<div class="header-one">
<div></div>
</div>
<div class="header-two">
<van-search
clearable="true"
shape="round"
background="#ffff"
maxlength="10"
v-model="value"
placeholder="请输入搜索关键词"
input-align="center"
/>
</div>
</div>
<div class="sec">
<ul class="topnav-show" v-show="currindex==0">
<li>内容1</li>
</ul>
<ul class="topnav-show" v-show="currindex==1">
<li>内容2</li>
</ul>
<ul class="topnav-show" v-show="currindex==2">
<li>内容3</li>
</ul>
<ul class="topnav-show" v-show="currindex==3">
<li>内容4</li>
</ul>
</div>
<div class="footer">
<ul>
<!-- vue实现tab切换并带切换样式的效果 -->
<li v-for="(item,index) in tabList" :key="index" @click="btncli(index)">
<P class="produc">
<img :src="currindex==index ?item.img1 :item.img" alt />
</P>
<!-- <P :class="{text:!(index-currindex)}">{
{
item.name}}</P>
这个也是切换的效果 -->
<P :class="currindex==index?'text':''">{
{
item.name}}</P>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
value: "", //这个是搜索的value值
currindex: 0, //默认显示索引0
tabList: [
{
name: "产品",
img: require("../../src/assets/image/icon_product@3x(2).png"),
img1: require("../../src/assets/image/[email protected]")
},
{
name: "任务",
img: require("../../src/assets/image/icon_product@3x(1).png"),
img1: require("../../src/assets/image/icon_product@3x1(1).png")
},
{
name: "问答",
img: require("../../src/assets/image/icon_product@3x(2).png"),
img1: require("../../src/assets/image/[email protected]")
},
{
name: "我的",
img: require("../../src/assets/image/icon_product@3x(3).png"),
img1: require("../../src/assets/image/[email protected]")
}
]
};
},
methods: {
// 点击切换tab
btncli(index) {
this.currindex = index;
},
onSearch(val) {
Toast(val);
},
onCancel() {
Toast("取消");
}
},
components: {
}
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
height: 100vh;
.header {
width: 100%;
height: 100px;
line-height: 100px;
vertical-align: middle;
display: flex;
/deep/.header-one {
flex: 1.5;
padding: 26px;
vertical-align: middle;
div {
width: 100px;
height: 50px;
background: url("../assets/image/[email protected]") no-repeat center;
background-size: cover;
background-size: 100% 100%; //等比例拉伸
}
}
.header-two {
flex: 7;
/deep/.van-search__content--round {
border: 1px solid rgb(233, 229, 229);
}
/deep/.van-field__control {
width: 70%;
}
/deep/.van-icon {
font-size: 36px;
line-height: 60px;
}
/deep/.van-search {
width: 90%;
height: 100px;
.van-cell {
background: none;
}
.van-cell__value {
height: 60px;
line-height: 60px;
font-size: 26px;
color: black !important;
}
}
}
}
.sec {
width: 100%;
height: calc(100% - 210px);
border: 1px solid red;
}
.footer {
width: 100%;
height: 110px;
border: 1px solid red;
ul {
display: flex;
line-height: 80px;
font-size: 30px;
color: #999999;
justify-content: space-around;
.text {
color: #8dd966;
}
.produc {
width: 60px;
height: 50px;
vertical-align: middle;
margin-bottom: -16px;
margin-top: 12px;
border: 1px solid red;
img {
width: 100%;
height: 100%;
}
}
}
}
}
</style>