左右,显示指法暂停播放

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

@@ -21,6 +21,7 @@ import state, {
 	IPlatform,
 	isRhythmicExercises,
 	resetPlaybackToStart,
+	togglePlay,
 } from "/src/state";
 import { browser, setGlobalData } from "../../utils";
 import AudioList from "../../view/audio-list";
@@ -364,6 +365,9 @@ export default defineComponent({
 			// 	orientation: state.fingeringInfo.orientation || 0,
 			// });
 			detailData.fingerPreView = true;
+			if (state.playState === 'play') {
+				togglePlay('paused')
+			}
 		};
 		const handleCloseFignerView = () => {
 			if (!query.modelType && detailData.orientation == 1) {

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

@@ -319,7 +319,7 @@
 
     .noteBtn {
         background: transparent;
-        color: rgba(69, 143, 177, .32);
+        color: rgba(69, 143, 177, .82);
         border: 0;
         padding: 0;
         font-size: 22px;
@@ -329,6 +329,9 @@
                 font-weight: bold;
             }
         }
+        &.disabled {
+            color: rgba(69, 143, 177, .32);
+        }
     }
 }
 

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

@@ -60,6 +60,8 @@ export default defineComponent({
 			tips: [] as IFIGNER_INSTRUMENT_Note[],
 
 			tnoteShow: false,
+			scrollLeftBtnDisabled: false, // 左按钮
+			scrollRightBtnDisabled: false, // 右按钮
 		});
 		const fingerData = reactive({
 			relationshipIndex: 0,
@@ -223,6 +225,12 @@ export default defineComponent({
 				left: type === 'left' ? -width : width,
 				behavior: 'smooth'
 			})
+			nextTick(() => {
+				setTimeout(() => {
+					data.scrollLeftBtnDisabled = (noteBoxRef.value as unknown as HTMLElement).scrollLeft === 0;
+					data.scrollRightBtnDisabled = (noteBoxRef.value as unknown as HTMLElement).scrollLeft >= (noteBoxRef.value as unknown as HTMLElement).scrollWidth / 2;
+				}, 300)
+			})
 		}
 
 		/** 滚轮缩放 */
@@ -338,7 +346,7 @@ export default defineComponent({
 								</div>
 							</div>
 							<div class={styles.notes}>
-								<Button class={styles.noteBtn} onClick={() => scrollNoteBox('left')}>
+								<Button class={[styles.noteBtn, data.scrollLeftBtnDisabled && styles.disabled]} onClick={() => scrollNoteBox('left')}>
 									<Icon name="arrow-left" />
 								</Button>
 								<div class={[styles.noteContent, browsInfo.ios ? '' : styles.noteContentWrap]}>
@@ -374,7 +382,7 @@ export default defineComponent({
 										})}
 									</div>
 								</div>
-								<Button class={styles.noteBtn} onClick={() => scrollNoteBox('right')}>
+								<Button class={[styles.noteBtn, data.scrollRightBtnDisabled && styles.disabled]} onClick={() => scrollNoteBox('right')}>
 									<Icon name="arrow" />
 								</Button>
 							</div>