积分页tab默认处理

views/Integral.less

@@ -815,6 +815,7 @@
 	.custom-tabs {
 		display: flex;
 		justify-content: space-between;
+		white-space: nowrap;
 
 		// 当只有两个标签时，居中显示并设置间距
 		&.tabs-two {

views/Integral.vue

@@ -556,14 +556,18 @@
 
       <!-- <view class="goods-container"> -->
       <!-- 页签栏 -->
-      <view
+      <scroll-view
+        v-if="goodsDataArr?.length > 1"
         class="custom-tabs"
         :class="{
           'tabs-two': goodsDataArr?.length === 2,
           'tabs-three': goodsDataArr?.length === 3,
           'tabs-many': goodsDataArr?.length >= 4,
         }"
-        v-if="goodsDataArr?.length > 1"
+        scroll-x="true"
+        :scroll-left="tabsScrollLeft"
+        show-scrollbar="false"
+        :enable-flex="true"
       >
         <!-- <view v-for="(tab, index) in tabInfo.tabTexts" :key="index" class="tab-item" :class="{ -->
         <view
@@ -581,7 +585,7 @@
           <!-- <text class="tab-line2">{{ tab?.line2 }}</text> -->
           <view class="select-line" v-if="activeIndex === index"></view>
         </view>
-      </view>
+      </scroll-view>
 
       <view
         class="goods-content"
@@ -769,7 +773,7 @@
 <script setup>
 // 轮播图数据可在此定义（当前使用静态路径）
 // "rgba(255,255,255,0.5)"
-import { ref, onMounted, onBeforeMount, onBeforeUnmount, computed, watch } from 'vue';
+import { ref, onMounted, onBeforeMount, onBeforeUnmount, computed, watch, nextTick } from 'vue';
 import { onShareAppMessage } from '@dcloudio/uni-app';
 import { jump, JumpType } from '@/utils/index.js';
 import { useUserStore } from '@/stores/user';
@@ -1608,6 +1612,7 @@ const integralData = ref({
 });
 
 const goodsDataArr = ref([]); //商品数据,包括tab内容
+const tabsScrollLeft = ref(0); // tabs滚动位置
 // const integralData = ref({});
 const showShengriliTipPanel = ref(false);
 const quanyitiaozhuanInfo = ref({});
@@ -2782,6 +2787,22 @@ const tabItemClick = (index, item) => {
   // });
 };
 
+// 监听 goodsDataArr 变化，当长度 >= 4 时设置初始滚动位置
+watch(
+  () => goodsDataArr.value?.length,
+  (newLength) => {
+    if (newLength >= 4) {
+      nextTick(() => {
+        // 设置初始滚动位置为 50rpx
+        tabsScrollLeft.value = 50;
+      });
+    } else {
+      tabsScrollLeft.value = 0;
+    }
+  },
+  { immediate: true }
+);
+
 // 处理查看更多点击
 const handleMoreClick = () => {
   const url = clickMore.value.url;