tab页签切换组件

2019年12月27日

一.样式1

1.通用固定tab切换样式

image.png

.menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}

.menu view {
  margin: 0 auto;
}

.select {
  font-size: 15px;
  color: red;
  width: 33%;
  text-align: center;
  height: 45px;
  line-height: 45px;
  border-bottom: 5rpx solid red;
}

.default {
  width: 33%;
  font-size: 15px;
  text-align: center;
  height: 45px;
  line-height: 45px;
}

2.顶部切换效果实现

image.png

.nav {
  display: flex;
  flex-direction: row;
  background-color: #222;
}

.select {
  width: 32%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  border-bottom: 10px solid #777;
}

.normal {
  width: 32%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 13px;
}

.line {
  height: 45px;
  line-height: 45px;
  font-size: 25px;
  color: #666;
}

二.样式1

1.效果：

image.png

2.实现

2.1view

  <view class="navbg">
    <view id="0" class="{{currentTab == 0?'select':'normal'}}" bindtap="switchNav">火车票</view>
    <view id="1" class="{{currentTab == 1?'select':'normal'}}" bindtap="switchNav">飞机票</view>
  </view>

.navbg {
  width: 92%;
  background-color: #898989;
  height: 40px;
  margin: 0 auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  flex-direction: row;
}

.select {
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #000;
  font-size: 15px;
  margin: 0 auto;
  background-color: #fff;
}

.normal {
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin: 0 auto;
}

2.2逻辑

Page({
  data: {
    currentTab: 0
  },
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  switchNav: function(e) {
    var id = e.currentTarget.id;
    this.setData({
      currentTab: id
    });
  }
  
})