高亮控制

pages/chaojidanci/wordList/wordList.vue

@@ -6,34 +6,37 @@
     </view>
     <view class="ezy-page-body word-body-box">
       <view
-        class="word-tab-box"
-        v-if="listData.danyuanNumberList && listData.danyuanNumberList.length > 0"
+          class="word-tab-box"
+          v-if="listData.danyuanNumberList && listData.danyuanNumberList.length > 0"
       >
-	  <!-- disabled-->
-		<icon class="word-jt jt-left" :class="{ disabled: listData.activeIndex === 0 }" />
-		<view class="tab-item-list">
-			<!-- active -->
-			<ezyActiveVue
-			  :id="'item-' + item.danyuanId"
-			  class="ezy-btn-active tab-item"
-			  v-for="(item, index) in listData.danyuanNumberList"
-			  :key="item.danyuanId"
-			  :class="{ active: listData.activeIndex == index }"
-			  v-show="
+        <!-- disabled-->
+        <icon class="word-jt jt-left" :class="{ disabled: listData.activeIndex === 0 }"/>
+		<view class="tab-item-list" id="tab-item-list">
+          <!-- active -->
+          <ezyActiveVue
+              :id="'item-' + item.danyuanId"
+              class="ezy-btn-active tab-item"
+              v-for="(item, index) in listData.danyuanNumberList"
+              :key="item.danyuanId"
+              :class="{ active: listData.activeIndex == index }"
+              v-show="
 			    isTargetInSameGroup(
 			      listData.danyuanNumberList,
 			      listData.danyuanNumberList[listData.activeIndex],
 			      item.danyuanId,
 			    )
 			  "
-			>
-			  Unit{{ item.number }}</ezyActiveVue>
-		</view>
-		<!-- disabled-->
-		<icon class="word-jt jt-right" :class="{ disabled: listData.activeIndex === listData.danyuanNumberList.length - 1 }"/>
+              @click="handleTabClick(index)"
+          >
+            Unit{{ item.number }}
+          </ezyActiveVue>
+        </view>
+        <!-- disabled-->
+        <icon class="word-jt jt-right"
+              :class="{ disabled: listData.activeIndex === listData.danyuanNumberList.length - 1 }"/>
       </view>
 
-        <swiper
+      <swiper
           class="word-list-swiper-box"
           :indicator-dots="false"
           :autoplay="false"
@@ -41,86 +44,90 @@
           :current="listData.activeIndex"
           @change="handleSwiperChange"
           :disable-touch="!swiperData.isAllowed"
-        >
-          <swiper-item
+      >
+        <swiper-item
             class="word-list-swiper-item"
             v-for="citem in unitList"
             :key="citem.danyuanId"
             @touchstart="handleTouchStart"
             @touchend="handleTouchEnd"
-          >
-            <view
+        >
+          <view
               class="word-list-body"
               v-if="citem.wordList && citem.wordList.length > 0"
-            >
-              <!-- num -->
-              <view class="word-num-box">
-                <icon></icon
-                ><text
-                  >{{ citem.studyCount || 0 }}/{{ citem.count || 0 }}词</text
-                >
-              </view>
+          >
+            <!-- num -->
+            <view class="word-num-box">
+              <icon></icon
+              >
+              <text
+              >{{ citem.studyCount || 0 }}/{{ citem.count || 0 }}词
+              </text
+              >
+            </view>
 
-              <!-- 单词 -->
-              <view
+            <!-- 单词 -->
+            <view
                 class="word-list-item"
                 v-for="(item, index) in citem.wordList"
                 :key="index"
                 @click="toWord(item)"
                 :class="{ active: item.wcFlag == 1 }"
-              >
-                <view class="item-word">
-                  <view class="word-text">
-                    <text
+            >
+              <view class="item-word">
+                <view class="word-text">
+                  <text
                       v-for="(word, wordIndex) in item.chaifen"
                       :key="wordIndex"
                       class="word-color"
-                    >
-                      {{ word }}
-                    </text>
-                  </view>
-                  <view class="phonetic-alphabet">{{
+                  >
+                    {{ word }}
+                  </text>
+                </view>
+                <view class="phonetic-alphabet">{{
                     item.yinbiao || ""
-                  }}</view>
+                  }}
                 </view>
-                <view class="item-explain">
-                  <view class="item-explain-content">
-                    <view
+              </view>
+              <view class="item-explain">
+                <view class="item-explain-content">
+                  <view
                       class="explain-text"
                       v-for="(meaning, meaningIndex) in item.jianyi"
                       :key="meaningIndex"
-                      >{{ meaning }}</view
-                    >
-                  </view>
-                </view>
-                <view class="item-arrow">
-                  <icon></icon>
+                  >{{ meaning }}
+                  </view
+                  >
                 </view>
               </view>
+              <view class="item-arrow">
+                <icon></icon>
+              </view>
             </view>
-            <!-- 没有单词 -->
-            <view class="no-word-box" v-else> 暂无单词 </view>
-          </swiper-item>
-        </swiper>
+          </view>
+          <!-- 没有单词 -->
+          <view class="no-word-box" v-else> 暂无单词</view>
+        </swiper-item>
+      </swiper>
     </view>
-	<tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
+    <tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
   </view>
 </template>
 
 <script setup>
-import { reactive, ref, nextTick, computed } from "vue";
+import {reactive, ref, nextTick, computed, getCurrentInstance} from "vue";
 import {
   toast,
   getDataFromStr,
   useActiveDomIntoView,
   isTargetInSameGroup,
 } from "@/utils/common";
-import { onLoad } from "@dcloudio/uni-app";
-import { getWordZhangList } from "@/api/chaojidanci.js";
+import {onLoad} from "@dcloudio/uni-app";
+import {getWordZhangList} from "@/api/chaojidanci.js";
 import cacheManager from "@/utils/cacheManager.js";
-import { useSwiper } from "@/utils/useSwiper";
+import {useSwiper} from "@/utils/useSwiper";
 import tipSmallDialog from "@/components/dialog/tipSmallDialog.vue";
-
+import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
 
 const goPayDialogRef = ref(null);
 const listData = reactive({
@@ -140,9 +147,10 @@ const info = reactive({
 const tipContent = '是否前往开通付费？';
 
 
-const { swiperData, handleTouchStart, handleTouchEnd, userCode } = useSwiper(
-  listData,
-  (userCode) => { },
+const {swiperData, handleTouchStart, handleTouchEnd, userCode} = useSwiper(
+    listData,
+    (userCode) => {
+    },
 );
 
 onLoad((options) => {
@@ -162,10 +170,49 @@ function handleSwiperChange(e) {
     });
     swiperData.isAllowed = false; // 重置状态
   }
-  findWordLeft(listData.activeIndex);
+  // findWordLeft(listData.activeIndex);
+  centerActiveTab();
   updataShuju(listData.danyuanNumberList[listData.activeIndex]);
 }
 
+// 处理tab点击
+function handleTabClick(index) {
+  listData.activeIndex = index;
+  centerActiveTab();
+  updataShuju(listData.danyuanNumberList[index]);
+}
+
+// 使激活的tab居中显示
+function centerActiveTab() {
+  nextTick(() => {
+     const query = uni.createSelectorQuery().in(getCurrentInstance());
+        query.select('#tab-item-list').boundingClientRect();
+        query.select('.tab-item.active').boundingClientRect();
+        query.exec((res) => {
+          if (res && res[0] && res[1]) {
+            const containerWidth = res[0].width;
+            const activeLeft = res[1].left - res[0].left;
+            const activeWidth = res[1].width;
+            const scrollLeft = activeLeft - (containerWidth / 2) + (activeWidth / 2);
+            
+            // 边界处理
+            const finalScrollLeft = Math.max(0, scrollLeft);
+            
+            // 使用 uni-app 的 API 来设置滚动位置
+            uni.createSelectorQuery().in(getCurrentInstance())
+              .select('#tab-item-list')
+              .fields({ node: true }, (result) => {
+                if (result && result.node) {
+                  const node = result.node;
+                  node.scrollLeft = finalScrollLeft;
+                }
+              })
+              .exec();
+          }
+		})
+  });
+}
+
 
 // 返回
 function goBack() {
@@ -183,7 +230,7 @@ function updataCache(data) {
 
 //tab click
 function handleTitleClick(item) {
- updataShuju(item);
+  updataShuju(item);
 }
 
 // 修改数据 &&定位岛
@@ -205,41 +252,43 @@ function findIndexByDanyuanId(list, danyuanId) {
 
 // 获取滚动距离
 function findWordLeft(data) {
-  useActiveDomIntoView(".word-title-box", ".title-item.active");
+  // useActiveDomIntoView(".word-title-box", ".title-item.active");
+  // 替换为 uni-app 兼容的滚动方法
+  centerActiveTab();
 }
 
 function getWordListData() {
   const opt = {
     danyuanId: 244, // routerOpt.danyuanId
-	  banbenId: 39, // routerOpt.banbenId
+    banbenId: 39, // routerOpt.banbenId
   };
   getWordZhangList(opt)
-    .then((res) => {
-      if (res.code === 0) {
-        listData.title = res.data.title;
-        unitList.value = res.data.danyuanWordsList;
-        listData.danyuanNumberList = res.data.danyuanNumberList;
-        unitList.value.forEach((item) => {
-          if (item.danyuanId == danyuanId.value) {
-            listData.activeIndex = findIndexByDanyuanId(
-              listData.danyuanNumberList,
-              danyuanId.value
-            );
-          }
-        });
-      }
-    })
-    .catch((err) => {
-		console.log('err',err)
-      toast("获取单词列表数据失败");
-    });
+      .then((res) => {
+        if (res.code === 0) {
+          listData.title = res.data.title;
+          unitList.value = res.data.danyuanWordsList;
+          listData.danyuanNumberList = res.data.danyuanNumberList;
+          unitList.value.forEach((item) => {
+            if (item.danyuanId == danyuanId.value) {
+              listData.activeIndex = findIndexByDanyuanId(
+                  listData.danyuanNumberList,
+                  danyuanId.value
+              );
+            }
+          });
+        }
+      })
+      .catch((err) => {
+        console.log('err', err)
+        toast("获取单词列表数据失败");
+      });
 }
 
 // 单词
 function toWord(data) {
- uni.redirectTo({
-   url: `/pages/chaojidanci/newEnglish/index?danyuanId=${danyuanId.value}&wordId=${data.id}`,
- });
+  uni.redirectTo({
+    url: `/pages/chaojidanci/newEnglish/index?danyuanId=${danyuanId.value}&wordId=${data.id}`,
+  });
 }
 
 // 去支付
@@ -251,11 +300,11 @@ function goPayPage() {
   }
   uni.redirectTo({
     url:
-      "/pages/mall/mallPage?cardId=" +
-      zhangInfoLocal.cardId +
-      "&from=daoPage" +
-      "&subjectId=" +
-      zhangInfoLocal.subjectId,
+        "/pages/mall/mallPage?cardId=" +
+        zhangInfoLocal.cardId +
+        "&from=daoPage" +
+        "&subjectId=" +
+        zhangInfoLocal.subjectId,
   });
 }
 </script>