wxml:
<page>
<view class='jiange'></view>
<view class='tab'>
<view class="nav bc_white">
<view class="{{selected?'red':'default'}}" bindtap="selected">全部</view>
<view class="{{selected1?'red':'default'}}" bindtap="selected1">科创</view>
<view class="{{selected2?'red':'default'}}" bindtap="selected2">演出</view>
<view class="{{selected3?'red':'default'}}" bindtap="selected3">时尚</view>
</view>
<view class="{{selected?'show':'hidden'}}">for system</view>
<view class="{{selected1?'show':'hidden'}}">for activity</view>
<view class="{{selected2?'show':'hidden'}}">for activit222y</view>
<view class="{{selected3?'show':'hidden'}}">for acti111vit222y</view>
</view>
</page>
wxss:
/* pages/index12/index12.wxss */
page {
750rpx;
overflow: hidden;
}
page .jiange {
750rpx;
height: 1rpx;
background: rgba(204, 204, 204, 1);
}
page .tab .nav {
100%;
height: 100rpx;
display: flex;
flex-direction: row;
border-bottom: 1rpx solid #ddd;
padding-left: 30rpx;
}
page .tab .nav view {
60rpx;
margin-right: 66rpx;
}
page .tab .default {
text-align: center;
60rpx;
font-size: 30rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 100rpx;
}
page .tab .red {
text-align: center;
60rpx;
font-size: 30rpx;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 100rpx;
border-bottom: 7rpx solid #1bbc9b;
}
page .tab .show {
display: block;
text-align: center;
line-height: 200rpx;
}
page .tab .hidden {
display: none;
text-align: center;
line-height: 200px;
}
js:
// pages/index12/index12.js
Page({
/**
* 页面的初始数据
*/
data: {
selected: true,
selected1: false,
selected2: false,
selected3: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
selected: function (e) {
this.setData({
selected1: false,
selected: true,
selected2: false,
selected3: false
})
},
selected1: function (e) {
this.setData({
selected: false,
selected1: true,
selected2: false,
selected3: false
})
},
selected2: function (e) {
this.setData({
selected: false,
selected2: true,
selected1: false,
selected3: false
})
},
selected3: function (e) {
this.setData({
selected: false,
selected2: false,
selected1: false,
selected3: true
})
}
})