小程序Tabs切换

小程序Tabs切换

HTML

<view class="top >
  <view class="li" bindtap="changeIndex" data-index="{{index}}" wx:for="{{topNav}}"
    style="color:{{activetop == index?'#000':''}}" wx:key="*this">{{item}}
    <view class="hr" wx:if="{{activetop == index}}"></view>
  </view>
</view>
<view class="banner1" wx:if="{{activetop == 0}}">
  //第一个切换页面 后面依次类推
</view>

CSS

.top {
  width: 100%;
  height: 84rpx;
  background: #fff;
  /* position: -webkit-sticky; */
  /* position: fixed; */
  /* left: 0;
  top: 0; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 99;
  bottom: 0;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.08);
}

.top .li {
  width: 50%;
  height: 84rpx;
  line-height: 84rpx;
  text-align: center;
  position: relative;
  color: #595959;
}

.top .li .hr {
  width: 64rpx;
  height: 6rpx;
  background: #fa6358;
  border-radius: 6rpx;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

JS

data:{
    topNav: ['组织架构', '红色楼道', '事迹风采'],
    activetop: 0,
}
//点击切换
    changeIndex(e) {
      let activetop = e.currentTarget.dataset.index
      this.setData({
        activetop
      })
    }