Wxml代碼:
<view class="body"> <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 activity</view> <view class="{{selected3?'show':'hidden'}}">for activity</view> </view>
Wxss代碼：
page { background-color: #edf0f3;
} .nav { width: 100%; height: 100rpx; display: flex; flex-direction: row;
} .default { line-height: 100rpx; text-align: center; flex: 1; border-right: 1px solid gainsboro; color: #000; font-weight: bold; font-size: 28rpx;
} .red { line-height: 100rpx; text-align: center; color: #fc5558; flex: 1; border-right: 1px solid gainsboro; font-weight: bold; font-size: 28rpx;
} .show { display: block; text-align: center; line-height: 200rpx;
} .hidden { display: none; text-align: center; line-height: 200px;
}
JS片段
// pages/model/index.js
Page({
/**
* 頁面的初始數據
*/
data: {
selected: true,
selected1: false,
selected2: false,
selected3: false
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
selected: function (e) {
this.setData({
selected1: false,
selected2: false,
selected3: false,
selected: true
})
},
selected1: function (e) {
this.setData({
selected: false,
selected2: false,
selected3: false,
selected1: true
})
},
selected2: function (e) {
this.setData({
selected: false,
selected1: false,
selected3: false,
selected2: true
})
},
selected3: function (e) {
this.setData({
selected: false,
selected2: false,
selected1: false,
selected3: true
})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
