左右移动，滚动缩放，显示隐藏

src/page-instrument/view-detail/index.tsx

@@ -331,6 +331,16 @@ export default defineComponent({
 				sendParentMessage(state.playState);
 			}
 		);
+		/** 指法预览切换 */
+		watch(() => detailData.fingerPreView, () => {
+			window.parent.postMessage(
+				{
+					api: "api_fingerPreView",
+					state: detailData.fingerPreView,
+				},
+				"*"
+			);
+		})
 		onMounted(() => {
 			window.addEventListener("resize", resetMusicScore);
 		});

src/page-instrument/view-figner/index.module.less

@@ -320,7 +320,6 @@
     .noteBtn {
         background: transparent;
         color: rgba(69, 143, 177, .32);
-        pointer-events: none;
         border: 0;
         padding: 0;
         font-size: 22px;

src/page-instrument/view-figner/index.tsx

@@ -1,4 +1,4 @@
-import { PropType, computed, defineComponent, nextTick, onBeforeMount, onMounted, onUnmounted, reactive } from "vue";
+import { PropType, computed, defineComponent, nextTick, onBeforeMount, onMounted, onUnmounted, reactive, ref } from "vue";
 import styles from "./index.module.less";
 import icons from "./image/icons.json";
 import { FIGNER_INSTRUMENT_DATA, IFIGNER_INSTRUMENT_Note } from "/src/view/figner-preview";
@@ -216,12 +216,41 @@ export default defineComponent({
 			}
 		};
 
+		const noteBoxRef = ref()
+		const scrollNoteBox = (type: 'left' | 'right') => {
+			const width = noteBoxRef.value.offsetWidth / 2;
+			(noteBoxRef.value as unknown as HTMLElement).scrollBy({
+				left: type === 'left' ? -width : width,
+				behavior: 'smooth'
+			})
+		}
+
+		/** 滚轮缩放 */
+		const handleWheel = (e: WheelEvent) => {
+			e.preventDefault();
+			if (e.deltaY > 0) {
+				data.transform.scale -= 0.1;
+				if (data.transform.scale <= 0.5) {
+					data.transform.scale = 0.5;
+				}
+			} else {
+				data.transform.scale += 0.1;
+				if (data.transform.scale >= 2) {
+					data.transform.scale = 2;
+				}
+			}
+		};
+
 		onMounted(() => {
 			window.addEventListener("message", changePlay);
+			const fingeringContainer = document.getElementById("fingeringContainer");
+			fingeringContainer?.addEventListener("wheel", handleWheel);
 		});
 
 		onUnmounted(() => {
 			window.removeEventListener("message", changePlay);
+			const fingeringContainer = document.getElementById("fingeringContainer");
+			fingeringContainer?.removeEventListener("wheel", handleWheel);
 		});
 		return () => {
 			const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
@@ -309,11 +338,11 @@ export default defineComponent({
 								</div>
 							</div>
 							<div class={styles.notes}>
-								<Button class={styles.noteBtn}>
+								<Button class={styles.noteBtn} onClick={() => scrollNoteBox('left')}>
 									<Icon name="arrow-left" />
 								</Button>
 								<div class={[styles.noteContent, browsInfo.ios ? '' : styles.noteContentWrap]}>
-									<div class={styles.noteBox}>
+									<div ref={noteBoxRef} class={styles.noteBox}>
 										{data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
 											const steps = new Array(Math.abs(note.step)).fill(1);
 											return (
@@ -345,7 +374,7 @@ export default defineComponent({
 										})}
 									</div>
 								</div>
-								<Button class={styles.noteBtn}>
+								<Button class={styles.noteBtn} onClick={() => scrollNoteBox('right')}>
 									<Icon name="arrow" />
 								</Button>
 							</div>