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 () {
}
})
