<view class="tab">
<view class="msg_tab {{selected?'cur':'default'}}" bindtap="selected">癥常青年</view>
<view class="msg_tab {{selected1?'cur':'default'}}" bindtap="selected1">非虛構(gòu)</view>
<view class="msg_tab {{selected2?'cur':'default'}}" bindtap="selected2">世界藥丸</view>
<view class="msg_tab {{selected3?'cur':'default'}}" bindtap="selected3">我有故事</view>
<view class="msg_tab {{selected4?'cur':'default'}}" bindtap="selected4">寫(xiě)讀者</view>
</view>
<view class="{{selected?'show':'hidden'}}">界面1</view>
<view class="{{selected1?'show':'hidden'}}">界面2</view>
<view class="{{selected2?'show':'hidden'}}">界面3</view>
<view class="{{selected3?'show':'hidden'}}">界面4</view>
<view class="{{selected4?'show':'hidden'}}">界面5</view>
.tab {
display: flex;
flex-direction: row;
background-color: #fff;
align-items: center;
justify-content: space-around;
}
.tab .msg_tab {
font-size: 24rpx;
color: #ccc;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.default {
color: #000;
}
.msg_tab.cur {
color: #000;
}
.show {
display: block;
}
.hidden {
display: none;
}
Page({
data:{
selected: true,
selected1: false,
selected2: false,
selected3: false,
selected4: false
},
selected: function (e) {
this.setData({
selected1: false,
selected2: false,
selected3: false,
selected4: false,
selected: true
})
},
selected1: function (e) {
this.setData({
selected: false,
selected2: false,
selected3: false,
selected4: false,
selected1: true
})
},
selected2: function (e) {
this.setData({
selected: false,
selected2: true,
selected3: false,
selected4: false,
selected1: false
})
},
selected3: function (e) {
this.setData({
selected: false,
selected2: false,
selected3: true,
selected4: false,
selected1: false
})
},
selected4: function (e) {
this.setData({
selected: false,
selected2: false,
selected3: false,
selected4: true,
selected1: false
})
}
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
