01_小程序之滚动导航点击状态

1、滚动 利用小程序 scroll-view组件 wxml布局如下

<view class='nav'>
 <scroll-view scroll-x="true" style='width:100%'>
  <view class='nav-list' wx:for="{{navData}}" data-id="{{index}}" bindtap='navbarTap'>
    <text  class="{{currentTab==index ? 'active' : ''}}">{{item}}</text>
  </view>
 </scroll-view>
</view>
//滚动主要设置 scroll-view 样式  white-space: nowrap;  display: flex;

2、wxss

page{
  background: #ccc;
}
.nav{
  border-top: 1px solid #888;
  background: #fff;
}
scroll-view{
 white-space: nowrap; 
 display: flex;
}
.nav .nav-list{
  display: inline-block;
  width: 120rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}
.nav-list text{
  position: relative;
  width: 100%;
  display: block;
  height: 100%;
  font-size: 32rpx;
}
.nav-list text.active{
  color: red;
}
.nav-list text.active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  height: 4rpx;
  width: 40%;
  transform: translate(-50%,-50%);
  background: red;
 
  
}

3、在js

 data:{
  currentTab:0 ,  //默认设置第一个
}

navbarTap:function(e){
  this.setData({
    currentTab:e.currentTarget.dataset.id
  })
}
// 上面可以获取id  如何判断
//{{currentTab==index ? 'active' : ''}}

效果

image.png