小程序之tab切换

• wxml代码：

<view class="tab">
  <view class="msg_tab {{selected?'cur':'default'}}" bindtap="selected">症常青年</view>
  <view class="msg_tab {{selected1?'cur':'default'}}" bindtap="selected1">非虚构</view>
  <view class="msg_tab {{selected2?'cur':'default'}}" bindtap="selected2">世界药丸</view>
  <view class="msg_tab {{selected3?'cur':'default'}}" bindtap="selected3">我有故事</view>
  <view class="msg_tab {{selected4?'cur':'default'}}" bindtap="selected4">写读者</view>
</view>
<view class="{{selected?'show':'hidden'}}">界面1</view>
<view class="{{selected1?'show':'hidden'}}">界面2</view>
<view class="{{selected2?'show':'hidden'}}">界面3</view>
<view class="{{selected3?'show':'hidden'}}">界面4</view>
<view class="{{selected4?'show':'hidden'}}">界面5</view>

• wxss代码：

.tab {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  align-items: center;
  justify-content: space-around;
}
.tab .msg_tab {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.default {
  color: #000;
}
.msg_tab.cur {
  color: #000;
}
.show {
  display: block;
}
.hidden {
  display: none;
}

• js代码：

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