tabsSwiper 全屏选项卡 样式修改

修改样式效果图如下，左右拖动

代码

<view>
      		
      		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
      			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
              <view class="" >
                {{item}}
              </view>
      			</swiper-item>
      		</swiper>
          <view>
          	<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
          	 swiperWidth="750" active-color="#FE662F" inactive-color="#E8E7EC" gutter='10' bar-width='20' :active-item-style='activeItem' :show-bar='false'></u-tabs-swiper>
          </view>
      	</view>

data() {
      return {
       	list: [{
       					name: '1'
       				}, {
       					name: '2'
       				}],
       current: 0, // tabs组件的current值，表示当前活动的tab选项
       swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
       tabs:['1','2'],
       activeItem:{
         width:'10rpx',
         height:'10rpx',
         background:'red'
       }
      };
    },

	// tabs通知swiper切换
      			tabsChange(index) {
      				this.swiperCurrent = index;
      			},
      			// swiper-item左右移动，通知tabs的滑块跟随移动
      			transition(e) {
      				let dx = e.detail.dx;
      				this.$refs.uTabs.setDx(dx);
      			},
      			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      			// swiper滑动结束，分别设置tabs和swiper的状态
      			animationfinish(e) {
      				let current = e.detail.current;
      				this.$refs.uTabs.setFinishCurrent(current);
      				this.swiperCurrent = current;
      				this.current = current;
      			},
      			// scroll-view到底部加载更多
      			onreachBottom() {
      				
      			},

  .u-tabs-scorll-flex{
    justify-content: center !important;
  }
  .u-tabs-scorll-flex .u-tabs-item{
    width: 24rpx;
    height: 10rpx !important;
    background: #E8E7EC;
    border-radius: 5rpx;
    flex: none !important;
    margin: 0 8rpx;
  }