|
@@ -8,16 +8,18 @@
|
|
|
<view :key="xueke.id" @click="handleSelectXueke(xueke)" v-for="xueke in xuekeData"
|
|
|
:class="['grade-item',{active: xueke.id == activeXueke}]">{{xueke.lable}}</view>
|
|
|
</view>
|
|
|
- <view class="subject-body">
|
|
|
- <view class="subject-content-box">
|
|
|
- <!-- 产品 -->
|
|
|
- <view v-for="item in xuekeList" :key="item.id" @click="handleSelectGrade(item)"
|
|
|
- :class="['subject-item', {active: item.id == activeProduct}]">
|
|
|
- <img :src="item.cover" class="subject-item-img" />
|
|
|
- <view class="subject-item-text">{{item.lable}}</view>
|
|
|
+ <scroll-view scroll-y="true" class="subject-body" :scroll-into-view="scrollTop">
|
|
|
+ <!-- <view class="subject-body"> -->
|
|
|
+ <view class="subject-content-box">
|
|
|
+ <!-- 产品 -->
|
|
|
+ <view v-for="item in xuekeList" :key="item.id" :id="`s_${item.id}`" @click="handleSelectGrade(item)"
|
|
|
+ :class="['subject-item', {active: item.id == activeProduct}]">
|
|
|
+ <img :src="item.cover" class="subject-item-img" />
|
|
|
+ <view class="subject-item-text">{{item.lable}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <!-- </view> -->
|
|
|
+ </scroll-view>
|
|
|
<view class="grade-line"></view>
|
|
|
<button class="grade-confirm-btn" @click="handleConfirm"></button>
|
|
|
</view>
|
|
@@ -27,7 +29,8 @@
|
|
|
import {
|
|
|
reactive,
|
|
|
toRefs,
|
|
|
- computed
|
|
|
+ computed,
|
|
|
+ nextTick
|
|
|
} from "vue";
|
|
|
import * as httpApi from "@/api/selectGradesTerms.js";
|
|
|
import {
|
|
@@ -52,7 +55,12 @@
|
|
|
activeXueke: 1, // 当前学期
|
|
|
activeTipFlag: null, // 当前学期
|
|
|
xuekeData: [], // 学科总数据
|
|
|
+ scrollTop: '',
|
|
|
});
|
|
|
+
|
|
|
+ function handleScroll() {
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
onLoad(({
|
|
|
productId,
|
|
@@ -92,6 +100,11 @@
|
|
|
data.activeProduct = null;
|
|
|
data.activeXueke = 1
|
|
|
}
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ // 滚动到某个元素显示
|
|
|
+ data.scrollTop = `s_${data.activeProduct}`
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -180,7 +193,8 @@
|
|
|
activeXueke,
|
|
|
xuekeData,
|
|
|
handleConfirm,
|
|
|
- handleBack
|
|
|
+ handleBack,
|
|
|
+ scrollTop
|
|
|
} = useSelectGrade()
|
|
|
|
|
|
const xuekeList = computed(() => {
|