u-tabs组件修改滑块高亮方式

src/pages/order/complete.vue

@@ -3,7 +3,7 @@
         <complete-check :show="completeCheck.status" :list-data="completeCheck.result" :pass="pass" @close="closeCheckResult" @confirm="confirm" :confirm-button-text="completeCheck.confirmText" :cancel-button-text="completeCheck.cancelText"></complete-check>
         <view class="com-content">
             <u-navbar :background="{background: '#2272FF'}" back-icon-color="#fff" :title-size="32" title-color="#fff" :border-bottom="false" :title="list[tabIndex].panelName" title-bold></u-navbar>
-			<u-tabs-swiper class="order-tabs" ref="tabs" :current="current" :showBar="showBar" name="panelName" :list="tabList"  @change="swichMenu" bg-color="#2272FF" inactive-color="#a6c6ff" active-color="#fff" height="80" font-size="32"></u-tabs-swiper>
+			<u-tabs class="order-tabs" ref="tabs" :current="current" name="panelName" :list="tabList"  @change="swichMenu" bg-color="#2272FF" inactive-color="#a6c6ff" active-color="#fff" height="80" font-size="32"></u-tabs>
 				<view class="u-menu-wrap">
                     <scroll-view :scroll-top="scrollRightTop" style="height: 100%;" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll" :scroll-into-view="itemId">
                         <u-form :model="form" ref="uForm">
@@ -208,7 +208,6 @@
     export default {
         data() {
             return {
-                showBar: false,
                 orderId:0,
 				categoryId:0,
 				orderServiceType:'',
@@ -382,10 +381,6 @@
 
                 this.list = list
 				// this.showTab = this.list.length > 1
-                setTimeout(() => {
-                    this.showBar = true
-                    this.current = 0
-                }, 1000)
 				// 异常单处理
 				if (this.auditResultsId) this.checkCompleteError()
                 uni.hideLoading()
@@ -509,8 +504,8 @@
                     this.tabIndex++
                     this.arr = []
                     this.scrollRightTop = 0
-                    this.current = null
-                    this.itemId = ''
+                    this.current = 0
+                    //this.itemId = ''
                     //const itemId = this.list[this.tabIndex].items[0].items[0].fieldsId
                     //this.oldItemId = `item${itemId}`
                     this.$nextTick(async () => {

src/uview-ui/components/u-tabs/u-tabs.vue

@@ -10,8 +10,8 @@
 					 :style="[tabItemStyle(index)]">
 						<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
 						{{ item[name] || item['name']}}
+						<view v-show="showBar && currentIndex === index" class="u-tab-bar" :style="[tabBarStyle]"></view>
 					</view>
-					<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
 				</view>
 			</scroll-view>
 		</view>
@@ -197,14 +197,16 @@
 			tabBarStyle() {
 				let style = {
 					width: this.barWidth + 'rpx',
-					transform: `translate(${this.scrollBarLeft}px, -100%)`,
+					//transform: `translate(${this.scrollBarLeft}px, -100%)`,
 					// 滑块在页面渲染后第一次滑动时，无需动画效果
-					'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
+					//'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
 					'background-color': this.activeColor,
 					height: this.barHeight + 'rpx',
 					opacity: this.barFirstTimeMove ? 0 : 1,
 					// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
-					'border-radius': `${this.barHeight / 2}px`
+					'border-radius': `${this.barHeight / 2}px`,
+					'left': '50%',
+    			'margin-left': `-${this.barWidth / 2}rpx`
 				};
 				Object.assign(style, this.barStyle);
 				return style;