小程序之Tab切换

微信小程序之tab切换效果：

image.png

.wxml代码：

<view class="container">
    <view class="nav bc_white">
        <view class="{{selected?'red':'default'}}" bindtap="selected">发现</view>
        <view class="{{selected1?'red':'default'}}" bindtap="selected1">资讯</view>
    </view>
    <view class="{{selected?'show':'hidden'}}">发现内容</view>
    <view class="{{selected1?'show':'hidden'}}">资讯内容</view>
</view>

.wxss代码：

page{
    background-color: #edf0f3;
}
.nav{
    width: 100%;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    background-color: #fff;
}
.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: #f28045;
    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代码：

Page({
  data: {
    selected: true,
    selected1: false
  },
  selected: function() {
    this.setData({
      selected: true,
      selected1: false
    })
  },
  selected1: function() {
    this.setData({
      selected: false,
      selected1: true
    })
  }
})