导航栏激活选中——下方出现红条

效果图：

 

wxml:

<!-- shop导航 -->
<view class="shop_dh">
<scroll-view class="daohang" scroll-x>

  <view bindtap ="hongtiao" data-index="{{index}}" 
  class="daohang_item {{index===currentIndexNav?'active':''}}"  
  wx:for="{{shoplist}}" wx:key="id"> {{item.name}}</view>

  </scroll-view>
</view>

js文件：

Page({
  data: {
   // 被点击的首页导航的菜单索引
   currentIndexNav:0,
   shoplist: [
    {
      id: 0,
      name: "首页"
    },
    {
      id: 1,
      name: "女子服饰"
    },
    {
      id: 2,
      name: "男子服饰"
    },
    {
      id: 3,
      name: "健康食品"
    },
    {
      id: 4,
      name: "室内健身"
    },
    {
      id: 5,
      name: "户外跑步"
    },
    {
      id: 6,
      name: "装备护具"
    },
  ]
  },
   // 点击首页导航按钮
   hongtiao(e){
   // console.log(123);
      this.setData({
        currentIndexNav:e.target.dataset.index
     })
   },


})

wxss

.shop_dh{
  background-color: white;
  display: flex;
}
.daohang{
  white-space: nowrap;
  padding: 5rpx 0;
}
.daohang_item{
  padding: 20rpx 45rpx;
  font-size: 30rpx;
  display: inline-block;
}
.daohang_item.active{
  border-bottom: 5rpx solid #de688b;
}