feat: 新增支持tabs在swiper中使用

ijry · Aug 2, 2024 · ce1e3ca · ce1e3ca
1 parent e9803ae
commit ce1e3ca
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/src/pages/componentsC/tabs/tabs.nvue b/src/pages/componentsC/tabs/tabs.nvue
@@ -118,7 +118,43 @@
 					</template>
 				</up-tabs>
 				<up-button type="primary" size="small" style="width: 120px;"
-					@click="nextTab">切换下一个{{ list1Current }}</up-button>
+					@click="nextTab" :text="'切换下一个' + list1Current">
+				</up-button>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">在swiper中使用</text>
+			<view class="u-demo-block__content">
+				<swiper class="swiper" >
+				  <swiper-item item-id="A">
+					<up-tabs :list="list1">
+						<template #default="scope">
+							<text class="u-tabs__wrapper__nav__item__text"
+								style="color: red">
+								{{scope.item?.[scope.keyName] || '-'}}
+							</text>
+						</template>
+					</up-tabs>
+				  </swiper-item>
+				  <swiper-item item-id="A">
+				  <up-tabs
+				  	:list="list4"
+				  	lineWidth="30"
+				  	lineColor="#f56c6c"
+				  	:activeStyle="{
+				  		color: '#303133',
+				  		fontWeight: 'bold',
+				  		transform: 'scale(1.05)'
+				  	}"
+				  	:inactiveStyle="{
+				  		color: '#606266',
+				  		transform: 'scale(1)'
+				  	}"
+				  	itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+				  >
+				  </up-tabs>
+				  </swiper-item>
+				</swiper>
 			</view>
 		</view>
 	</view>

diff --git a/src/uni_modules/uview-plus/components/u-tabs/u-tabs.vue b/src/uni_modules/uview-plus/components/u-tabs/u-tabs.vue
@@ -178,6 +178,7 @@
                 // 获取下划线的数值px表示法
 				const lineWidth = getPx(this.lineWidth);
 				this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
+				console.log(lineOffsetLeft)
 				// #ifdef APP-NVUE
 				// 第一次移动滑块，无需过渡时间
 				this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
@@ -257,6 +258,12 @@
 					return
 				}
 				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+					// 兼容在swiper组件中使用
+					if (tabsRect.left > tabsRect.width) {
+						tabsRect.right = tabsRect.right - Math.floor(tabsRect.left / tabsRect.width) * tabsRect.width
+						tabsRect.left = tabsRect.left % tabsRect.width
+					}
+					// console.log(tabsRect)
 					this.tabsRect = tabsRect
 					this.scrollViewWidth = 0
 					itemRect.map((item, index) => {