优化-增加选集弹窗将当前滚动到弹窗中间位置

components/my-video-list/list-item.vue

@@ -281,7 +281,6 @@
 	})
 	onMounted(() => {
 		init()
-		console.log('itemMounted',props.index);
 		emits('itemMounted', props.index)
 	})
 

components/my-video-list/my-video-list.vue

@@ -47,12 +47,16 @@
 				</view>
 				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
 			</view>
-			<scroll-view scroll-y="true" class="u-m-t-30" style="height: 400px;box-sizing: border-box;"
+			<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" 
-				:show-scrollbar="false">
+			ref="refXuanjiList"
+			:style="{height:xuanjiData.height+'px'}"
+			@scroll="xuanjiScroll"
+				:scroll-top="xuanjiData.scrollTop" scroll-with-animation :show-scrollbar="false">
 				<view class="ji-list u-flex u-flex-row u-flex-wrap">
 					<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
-						:class="{active:nowIndex==index,'mr-0':(index+1)%3==0}" v-for="(item,index) in list"
+						
-						:key="index">
+						:class="[nowIndex==index?'active':'',(index+1)%3==0?'mr-0':'','ji-item'+index]"
+						v-for="(item,index) in list" :key="index">
 						<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
 						<view class="lock u-flex-xy-center" v-if="!item.videoUrl">
 							<up-icon name="lock" :size="14" color="#fff"></up-icon>
@@ -157,6 +161,9 @@
 	import {
 		useCommonStore
 	} from '@/store/common.js'
+	import {
+		getElRect
+	} from '@/utils/util.js'
 	const $common = useCommonStore()
 
 	// #ifdef APP
@@ -185,6 +192,7 @@
 	let initing = true
 	const refPoster = ref(null)
 
+
 	const props = defineProps({
 		list: {
 			type: Array,
@@ -308,6 +316,49 @@
 		payType: null
 	})
 
+	//选集数据
+	const xuanjiData = reactive({
+		scrollTop: 0,
+		items: [],
+		scrollHeight: 0,
+		height:400
+	})
+	const refXuanjiList=ref(null)
+	function xuanjiScroll(e){
+		console.log(e);
+	}
+	async function xuanjiInit() {
+		// #ifdef APP
+		const height=44
+		const marginBottom=10
+		const oneItemHeight=height+marginBottom
+		xuanjiData.scrollTop=Math.ceil((nowIndex.value+1)/3) * oneItemHeight - (xuanjiData.height)/2+oneItemHeight/2
+		return
+		// #endif
+	
+		if (!xuanjiData.items[props.list.length - 1]) {
+			const res = await getElRect('ji-list', instance, {
+				rect: true
+			})
+			xuanjiData.scrollHeight = res.height
+			let firstItemTop=0
+			for (let i in props.list) {
+				const res1 = await getElRect('ji-item' + i, instance, {
+					rect: true
+				})
+				if(i==0){
+					firstItemTop=res1.top
+				}
+				xuanjiData.items[i] = {
+					height: res1.height,
+					top: i==0?0: res1.top-firstItemTop
+				}
+			}
+		}
+		xuanjiData.scrollTop =xuanjiData.items[nowIndex.value].top-(xuanjiData.height)/2+(xuanjiData.items[nowIndex.value].height)/2 
+			console.log(xuanjiData);
+	}
+
 
 	function openBs() {
 
@@ -340,7 +391,6 @@
 	}
 
 
-
 	//非金币支付
 	async function payOrder(data) {
 		const res = await Api.payOrder(data)
@@ -490,6 +540,17 @@
 
 	function popupShow(key = 'show', item, index) {
 		console.log(item);
+		if (key == 'show') {
+			// #ifdef H5
+			nextTick(() => {
+				xuanjiInit()
+			})
+			// #endif
+			// #ifdef APP
+			xuanjiInit()
+			// #endif
+			
+		}
 		popup[key] = true
 		if (item) {
 			popup.data = item
@@ -513,6 +574,7 @@
 		isCollect.value = newval
 	})
 
+
 	function toDetail(item, index) {
 		uni.navigateTo({
 			url: '/pages/video/detail?courseId=' + item.courseId
@@ -718,14 +780,17 @@
 	configInit()
 	onMounted(() => {
 		init()
+
 		// setTimeout(()=>{
 		// },500)
 	})
 	watch(() => props.list.length, (newval) => {
+		console.log('props.list.length change' + newval);
 		// #ifdef H5
 		init()
 		// #endif
 	})
+	watch(() => nowIndex.value, (newval) => {})
 	const nowDanjiPrice = computed(() => {
 		return videoList.value[current.value].price
 	})