hookehuyr

feat(StudyDetailPage): 添加目录弹框打开时自动滚动到当前课程功能

......@@ -847,12 +847,40 @@ const endAction = (item) => {
}
/**
* 新增记录
* 添加学习记录
* @param paramsObj
*/
const addRecord = async (paramsObj) => {
await addStudyRecordAPI(paramsObj);
}
// 监听目录弹框显示状态,当打开时滚动到当前课程位置
watch(showCatalog, (newVal) => {
if (newVal) {
// 等待DOM更新后执行滚动
nextTick(() => {
// 查找当前选中的课程元素
const selectedLesson = document.querySelector('.text-green-600')?.closest('.bg-white');
if (selectedLesson) {
// 获取滚动容器
const scrollContainer = document.querySelector('.van-popup .overflow-y-auto');
if (scrollContainer) {
// 计算滚动位置,使选中元素位于容器中间
const containerHeight = scrollContainer.clientHeight;
const lessonTop = selectedLesson.offsetTop;
const lessonHeight = selectedLesson.clientHeight;
const scrollTop = lessonTop - (containerHeight / 2) + (lessonHeight / 2);
// 平滑滚动到指定位置
scrollContainer.scrollTo({
top: scrollTop,
behavior: 'smooth'
});
}
}
});
}
});
</script>
<style lang="less" scoped>
......