增加滚动定位

common/styles/global/pages.scss

@@ -1826,8 +1826,9 @@
 		width: 94%;height: calc(100vh - 170rpx - var(--status-bar-height));margin: 3% 3%;display: flex;flex-direction: column;
 		background-color: rgba(255, 255, 255, 0.6);border-radius:0 0 8rpx 8rpx;}
 	.word-title-box{
-		display: flex;overflow-x: auto;flex-shrink: 0;margin: 0 8rpx;
+		flex-shrink: 0;margin: 0 2%;width: 96%;
 		line-height: 1.4;box-sizing: border-box;border-bottom: 1rpx dashed #068aea;
+		.uni-scroll-view-content{display: flex;}
 		.title-item{margin: 0 16rpx;color: #068aea;font-size: 28rpx;position: relative;padding: 12rpx 0;}
 		.title-item.active{font-weight: bold;}
 		.title-item.active::after{content: '';width: 70%;height: 8rpx;display: block;

pages/wordList/wordList.vue

@@ -7,10 +7,11 @@
 		</view>
 		<view class="ezy-tab-border">
 			<view class="ezy-border-body">
-				<!-- <view class="word-title-box" v-if="listData.jieNumberList && listData.jieNumberList.length >0">
-					<view class="title-item" v-for="(item,index) in listData.jieNumberList" :key="index"  
-					@click="handleTitleClick(item,index)" :class="{active: listData.activeIndex == index}">Unit{{item.number}}</view>
-				</view> -->
+				<scroll-view scroll-x="true" :scroll-left='wordLeft' class="word-title-box"
+				v-if="listData.jieNumberList && listData.jieNumberList.length >0">
+					<view :id="'item-' + item.jieId" class="title-item" v-for="(item,index) in listData.jieNumberList" :key="item.jieId"
+					@click="handleTitleClick(item)" :class="{active: listData.activeIndex == index}">Unit{{item.number}}</view>
+				</scroll-view>
 				<view class="word-num-box"><icon></icon><text>{{listData.studyCount || 0}}/{{listData.count || 0}}词</text></view>
 				<view class="word-list-body" v-if="listData.wordList && listData.wordList.length > 0">
 				<!-- 单词 -->
@@ -54,13 +55,13 @@ const listData = reactive({
 });
 let wordJieId = ref(null); 
 let routerOpt = ref(false);
+let wordLeft =  ref(0);
 
 onLoad((options) => {
 	routerOpt = options;
 	if (!cacheManager.get('auth')) {
 		// 游客
 		const youkeData = JSON.parse(routerOpt.youkePageData)
-		console.log('youkeData',youkeData.jieId);
 		wordJieId = youkeData.jieId
 		getWordListDataYk();
 	} else {
@@ -87,8 +88,7 @@ function goBack(){
 	
 }
 
-function handleTitleClick(item,index){
-	listData.activeIndex = index;
+function handleTitleClick(item){
 	wordJieId = item.jieId;
 	if (!cacheManager.get('auth')) {
 		getWordListDataYk();
@@ -97,7 +97,11 @@ function handleTitleClick(item,index){
 		getWordListData();
 	}
 }
-
+function findIndexByJieId(list, jieId){
+	const findIndex=list.findIndex(item => item.jieId == jieId)
+	wordLeft.value = findIndex*40;
+	return findIndex;
+}
 function getWordListData() {
     const opt = {
         jieId: wordJieId
@@ -109,6 +113,7 @@ function getWordListData() {
             listData.jieNumberList = res.data.jieNumberList;
             listData.title = res.data.title;
             listData.wordList = res.data.wordList;
+			listData.activeIndex = findIndexByJieId(listData.jieNumberList,wordJieId);
         }
     }).catch(err => {
         toast("获取单词列表数据失败");
@@ -126,6 +131,7 @@ function getWordListDataYk() {
             listData.jieNumberList = res.data.jieNumberList;
             listData.title = res.data.title;
             listData.wordList = res.data.wordList;
+			listData.activeIndex = findIndexByJieId(listData.jieNumberList,wordJieId);
         }
     }).catch(err => {
         toast("获取单词列表数据失败");