小程序TAB切换 简单版

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 {

width: 750rpx;

overflow: hidden;

}

page .jiange {

width: 750rpx;

height: 1rpx;

background: rgba(204, 204, 204, 1);

}

page .tab .nav {

width: 100%;

height: 100rpx;

display: flex;

flex-direction: row;

border-bottom: 1rpx solid #ddd;

padding-left: 30rpx;

}

page .tab .nav view {

width: 60rpx;

margin-right: 66rpx;

}

page .tab .default {

text-align: center;

width: 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;

width: 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

})

}

})