uni-app - 顶部水平可滚动导航栏

<!-- 导航 -->
<scroll-view class="navs" scroll-x>
  <view class="navs-view">
    <view class="navs-item" v-for="item in navs">
      <view class="title">{{item.title}}</view>
    </view>
  </view>
</scroll-view>

.navs{
   width: 100%;
   white-space:nowrap;
   .navs-view{
     display: flex;
     .navs-item{
       width: 560rpx;
       height: 110rpx;
       line-height: 110rpx;
       padding: 0 20rpx;
       color: rgb(119, 119, 119);
       font-weight: 700;
       position:relative;
       .title{
         font-size: 35rpx;
       }
     }
     .navs-item:hover{
       color: #000;
     }
     .navs-item:hover:after{
       content: ""; 
       position: absolute; 
       left: 35%; 
       bottom: 0; 
       width: 30%; 
       height: 10rpx; 
       border-bottom: 10rpx solid rgb(76, 88, 190); 
       border-radius: 50rpx;
       box-sizing: border-box;
     }
   }
 }