Tab选项卡

Tab选项卡

Tab选项卡

Tab选项卡

nav.wxml页面:

<!--nav.wxml-->
<view class='box'>
  <view class='navH'>
    <view class="{{selected1?'red':'default'}}" bindtap="selected1">服务导航</view>
    <view class="{{selected2?'red':'default'}}" bindtap="selected2">行业观察</view>
  </view>
  
  <view  class="{{selected1?'show':'hidden'}}">
  <!-- 借壳收购 -->
  <block wx:for="{{nav}}" wx:for-item="item">
    <view class='bar'>
      <navigator url="{{item.navList}}">
        <view class='barList'>
          <text>{{item.text}}</text>
          <image src='{{image}}'></image>
        </view>
      </navigator>
    </view>
  </block>

  </view>

  <view  class="{{selected2?'show':'hidden'}}">
 <!-- 借壳并购案例 -->
  <block wx:for="{{list}}" wx:item="item">
  <view class='bar'>
    <navigator url="/pages/column_list/column_list?id={{item.col_id}}">
      <view class='barList'>
        <text>{{item.col_name}}</text>
        <image src='{{image}}'></image>
      </view>
    </navigator>
  </view>
  </block>
</view>
</view>

nav.wxss页面

/**nav.wxss**/
.box .navH{
  width: 100%;
  height: 40px;
  
  padding: 10px;
  display:flex;
  flex-direction: row;
}
.box .navH text{
  margin: 5px;
}
.default{
  line-height:80rpx;
  text-align:center;
  border-right:1px solid gainsboro;
  color:#000;
  flex:1;
  font-size:16px;
  }
.red{
  line-height:80rpx;
  text-align:center;
  color:#fc5558;
  flex:1;
  border-right:1px solid gainsboro;
  font-weight:bold;
  font-size:18px;
  }
.show{
  display:block;
  }
.show .bar{
  margin-top: 5px;
}
.show .bar .barList{
  flex-direction: row;
  padding: 10px;
  border-bottom: 1px solid silver;
  background: lightblue;
  color: #fff;
}
.show .bar .barList text{
  font-size: 16px;
}
.show .bar .barList image{
   width: 20px;
   height: 20px;
   float: right;
}
.hidden{
  display:none;
  }

nav.js页面

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

写好这些就可以做出上面的效果了