课件播放云教练功能：问题合集

src/views/coursewarePlay/component/musicScore.module.less

@@ -5,10 +5,12 @@
   -webkit-overflow-scrolling: touch;
   overflow: scroll;
   .container {
+    position: relative;
     display: block;
     border: none;
     width: 100%;
     height: 100%;
+    z-index: 10;
   }
   .musicModel {
     position: absolute;
@@ -45,4 +47,36 @@
   left: 4%;
   top: 50%;
   margin-top: -15Px;
+}
+.skeletonWrap{
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 1;
+  padding-top: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  background: #fff;
+  pointer-events: none;
+}
+.skeleton {
+  --van-skeleton-paragraph-height: 24px;
+  :global{
+    .van-skeleton__content{
+      .van-skeleton-paragraph{
+        margin: 12px auto;
+        width: 80% !important;
+        &:first-child{
+          width: 60% !important;
+        }
+        &:last-child{
+          width: 100% !important;
+        }
+      }
+    }
+  }
 }

src/views/coursewarePlay/component/musicScore.tsx

@@ -4,7 +4,7 @@ import qs from 'query-string'
 import OEmpty from '@/components/o-empty'
 import iconStart from '../image/icon-start.svg'
 import { postMessage } from '@/helpers/native-message'
-import { Loading } from 'vant'
+import { Loading, Skeleton } from 'vant'
 import { usePageVisibility } from '@vant/use'
 import { useRoute } from 'vue-router'
 
@@ -112,6 +112,9 @@ export default defineComponent({
             )} */}
           </div>
         )}
+        {!isLoaded.value && <div class={styles.skeletonWrap}>
+          <Skeleton class={styles.skeleton} row={8} />
+        </div>}
       </div>
     )
   }

src/views/coursewarePlay/index.tsx

@@ -394,8 +394,8 @@ export default defineComponent({
       }
     }
     // 切换素材
-    const toggleMaterial = () => {
-      const index = data.itemList.findIndex((n: any) => n.id == popupData.itemActive)
+    const toggleMaterial = (itemActive: any) => {
+      const index = data.itemList.findIndex((n: any) => n.id == itemActive)
       if (index > -1) {
         handleSwipeChange(index)
       }
@@ -777,12 +777,8 @@ export default defineComponent({
             tabActive={popupData.tabActive}
             itemActive={popupData.itemActive}
             onHandleSelect={(res: any) => {
-              // console.log(res)
-              popupData.tabActive = res.tabActive
-              popupData.itemActive = res.itemActive
-              popupData.tabName = res.tabName
               popupData.open = false
-              toggleMaterial()
+              toggleMaterial(res.itemActive)
             }}
           />
         </Popup>