uni-app的scroll-view

211 阅读1分钟
<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
    <block v-for="(item,index) in tabBars" :key="index">
       <view class="scroll-tab-item" :class="{'active': tabIndex==index}" 			   @click="tabtap(index)">
          {{item.classname}}
          <view class="scroll-tab-line"></view>
       </view>
    </block>
</scroll-view>
	1样式很重要
    .scroll-tab {
        white-space: nowrap;
        /* 必要,导航栏才能横向*/
        border-bottom: 1rpx solid #eee;
        text-align: center;
     }

      .scroll-tab-item {
          display: inline-block;
          /* 必要,导航栏才能横向*/
          margin: 20rpx 30rpx 0 30rpx;
      }

      .active .scroll-tab-line {
          border-bottom: 5rpx solid #ff4f75;
          ;
          border-top: 5rpx solid #ff4f75;
          ;
          border-radius: 20rpx;
          width: 70rpx;
      }