<template>
<view class="page">
<view class="content flex" >
<!-- D -->
<view class="left" >
<view class="left_title" @click="linkA()">
A标题
</view>
<view class="left_txt" v-if="type === 'A' ">
A内容
</view>
</view>
<!-- B -->
<view class="center">
<view class="center_title" @click="linkB()">
B标题
</view>
<view class="center_txt" v-if="type === 'B' ">
B内容
</view>
</view>
<!-- C -->
<view class="right">
<view class="right_title" @click="linkC()">
C标题
</view>
<view class="right_txt" v-if="type === 'C' ">
C内容
</view>
</view>
<!-- D -->
<view class="D">
<view class="D_title" @click="linkD()">
D标题
</view>
<view class="D_txt" v-if="type === 'D' ">
D内容
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return{
type: 'A'
}
},
methods:{ // 两个页面跳转就用一个点击事件 多个页面跳转就要绑定每个页面都需要单独设置点击事件如下
linkA(){
this.type = 'A'
},
linkB(){
this.type = 'B'
},
linkC(){
this.type = 'C'
},
linkD(){
this.type = 'D'
}
}
}
</script>
<style lang="scss" scoped>
.page{
width: 100%;
.content{
width: 100%;
height: 300rpx;
background-color: #999999;
display: flex;
flex-direction: row;
justify-content: space-between;
.left{
width: 25%;
height: 100%;
// background-color: #CC6699;
border: 1rpx solid black;
.left_title{
width: 100%;
height: 20%;
// background-color: #FF9900;
text-align: center;
border-bottom: 1rpx solid black;
}
}
.center{
width: 25%;
height: 100%;
border: 1rpx solid black;
.center_title{
width: 100%;
height: 20%;
text-align: center;
border-bottom: 1rpx solid black;
}
}
.right{
width: 25%;
height: 100%;
border: 1rpx solid black;
.right_title{
width: 100%;
height: 20%;
text-align: center;
border-bottom: 1rpx solid black;
}
}
.D{
width: 25%;
height: 100%;
border: 1rpx solid black;
.D_title{
width: 100%;
height: 20%;
text-align: center;
border-bottom: 1rpx solid black;
}
}
}
}
</style>
uniapp 中tab切换多个单页面跳转v-if 和 click点击事件配合web页面也适用
猜你喜欢
转载自blog.csdn.net/m0_49714202/article/details/117120945
今日推荐
周排行