播放位移到指定高度

@@ -8,8 +8,8 @@
             <van-icon @click="onClose" name="cross" color="#DD7850" size="1.25rem" />
             <van-icon @click="onClose" name="cross" color="#DD7850" size="1.25rem" />
           </div>
           </div>
         </template>
         </template>
-        <div class="van-hairline--top" style="padding: 1rem;">
-          <div v-for="(item, index) in audio_list" :key="index" class="van-hairline--bottom audio-item">
+        <div class="audio-list van-hairline--top" style="padding: 1rem;">
+          <div :id="index" v-for="(item, index) in audio_list" :key="index" class="van-hairline--bottom audio-item">
             <div :class="['point', audio_index === index ? 'checked' : '']"></div>
             <div :class="['point', audio_index === index ? 'checked' : '']"></div>
             <div :class="['text', audio_index === index ? 'checked' : '', 'van-ellipsis']" @click="toggleHandleAudio(item, index)">
             <div :class="['text', audio_index === index ? 'checked' : '', 'van-ellipsis']" @click="toggleHandleAudio(item, index)">
               {{ index + 1 }}. {{ item.title }}<span v-if="item.play" class="text-center">正在播放</span>
               {{ index + 1 }}. {{ item.title }}<span v-if="item.play" class="text-center">正在播放</span>
@@ -58,6 +58,15 @@ const onHeightChange = ({ height }) => { // 监听高度变化
   if (!height) { // 关闭
   if (!height) { // 关闭
     onClose();
     onClose();
   }
   }
+  // 打开列表高度需要删除底部滚动空间
+  if (height > (0.2 * window.innerHeight)) {
+    $('.audio-list').css('marginBottom', 0);
+  }
+  // 添加可滚动高度
+  if (height === (0.2 * window.innerHeight)) {
+    let str = $('.audio-item').height() * audio_list.value.length;
+    $('.audio-list').css('marginBottom', `${str}px`);
+  }
 }
 }
 
 
 const info_height = ref(0);
 const info_height = ref(0);
@@ -72,6 +81,9 @@ watch(
     if (v) {
     if (v) {
       // 自动打开第一个
       // 自动打开第一个
       handleAudioPlay(audio_list.value[0], 0);
       handleAudioPlay(audio_list.value[0], 0);
+      // 添加可滚动高度
+      let str = $('.audio-item').height() * audio_list.value.length;
+      $('.audio-list').css('marginBottom', `${str}px`);
     } else {
     } else {
       onClose();
       onClose();
     }
     }
@@ -239,6 +251,20 @@ const handleAudioPlay = (item, index) => {
       console.log('Operation is too fast, audio play fails')
       console.log('Operation is too fast, audio play fails')
     })
     })
   }
   }
+  if (index) {
+    // 指定滚动到播放位置
+    scrollToId(index);
+  }
+}
+
+const scrollToId = (index) => { // 滚动到指定元素
+  nextTick(() => {
+    const element = document.getElementById(index);
+    console.warn(element);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  })
 }
 }
 
 
 const voicePause = () => {
 const voicePause = () => {