fix

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

@@ -1,7 +1,19 @@
-.musicScore{
-    .container{
-        border: none;
-        width: 100vw;
-        height: 100vh;
-    }
+.musicScore {
+  position: relative;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overflow: scroll;
+  .container {
+    display: block;
+    border: none;
+    width: 100vw;
+    height: 100vh;
+  }
+  .musicModel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
 }

src/views/coursewarePlay/component/musicScore.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, nextTick } from 'vue'
 import styles from './musicScore.module.less'
 
 export default defineComponent({
@@ -12,14 +12,38 @@ export default defineComponent({
   setup(props, {}) {
     const Authorization = sessionStorage.getItem('Authorization') || ''
     const dev = /(localhost|192)/.test(location.host)
-    console.log(dev)
-    let src = `${
-      dev ? `https://ponline.colexiu.com` : location.origin
-    }/orchestra-music-score/#/?id=${props.music.content}&Authorization=${Authorization}`
+    console.log(dev, 'https://ponline.colexiu.com')
+    let src = `${dev ? `http://192.168.3.114:3000` : location.origin}/orchestra-music-score/#/?id=${
+      props.music.content
+    }&Authorization=${Authorization}`
     console.log('src', src)
+    const isTouch = ref(true)
     return () => (
-      <div class={styles.musicScore}>
-        <iframe class={styles.container} src={src}></iframe>
+      <div
+        class={styles.musicScore}
+        // onTouchstart={() => {
+        //   console.log('onTouchstart')
+        //   isTouch.value = true
+        // }}
+        // onClick={() => {
+        //   console.log('onClick')
+        //   //   isTouch.value = false
+        // }}
+        // onTouchend={() => {
+        //   console.log('onTouchend')
+        //   // 由于touchEnd比click先触发，所以要等click执行完以后，再恢复pointer-events
+        //   setTimeout(() => {
+        //     isTouch.value = false
+        //   }, 1000)
+        // }}
+      >
+        <iframe
+          class={styles.container}
+          //   style={{ pointerEvents: isTouch.value ? 'none' : 'auto' }}
+          frameborder="0"
+          src={src}
+        ></iframe>
+        {/* <div class={styles.musicModel}></div> */}
       </div>
     )
   }

src/views/coursewarePlay/index.module.less

@@ -3,6 +3,13 @@
   height: 100vh;
   background-color: rgba(89, 98, 126, 0.2);
 }
+.headerContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
 .backBtn {
   position: absolute;
   left: 40px;
@@ -55,23 +62,21 @@
   }
 }
 .tabsContent {
+  width: 100vw;
+  height: 100vh;
   :global {
     .van-tabs__wrap {
       display: none !important;
     }
     .van-tabs__content {
-      width: 100vw;
-      height: 100vh;
-      .van-swipe {
-        width: 100vw;
-        height: 100vh;
-      }
+      width: 100%;
+      height: 100%;
     }
   }
 }
 .videoItem {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   --plyr-color-main: var(--van-primary);
   video {
     width: 100%;
@@ -84,12 +89,17 @@
   }
 }
 .imgItem {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }
 .songItem {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/coursewarePlay/index.tsx

@@ -10,11 +10,11 @@ import { useRoute } from 'vue-router'
 import { postMessage } from '@/helpers/native-message'
 import OHeader from '@/components/o-header'
 import MusicScore from './component/musicScore'
+import Swiper from 'swiper'
 
 export default defineComponent({
   name: 'CoursewarePlay',
   setup() {
-    const navBarHeight = ref(0)
     const handleInit = () => {
       postMessage({
         api: 'setRequestedOrientation',
@@ -25,27 +25,21 @@ export default defineComponent({
       postMessage({
         api: 'setBarStatus',
         content: {
-          status: 1
+          status: 0
+        }
+      })
+      postMessage({
+        api: 'setStatusBarVisibility',
+        content: {
+          isVisibility: 0
         }
       })
-      const sTitleHeight = sessionStorage.getItem('titleHeight')
-      if (sTitleHeight) {
-        navBarHeight.value = Number(sTitleHeight)
-      } else {
-        postMessage({ api: 'getNavHeight' }, (res) => {
-          const { content } = res as any
-          console.log("🚀 ~ content", content)
-          const dpi = content.dpi || 2
-          if (content.titleHeight) {
-            // 导航栏的高度
-            const titleHeight = content.titleHeight / dpi
-            sessionStorage.setItem('titleHeight', String(titleHeight))
-            navBarHeight.value = titleHeight
-          }
-        })
-      }
+
+      window.addEventListener('message', (val: any) => {
+        console.log(val)
+      })
     }
-    handleInit()
+
     const route = useRoute()
     const data = reactive({
       detail: null,
@@ -74,11 +68,13 @@ export default defineComponent({
       console.log(document.querySelectorAll('.player'))
       const player = Plyr.setup('.player', {
         debug: false,
-        ratio: '16:9'
+        ratio: '16:9',
+        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions']
       })
       console.log('🚀 ~ player', player)
     }
     onMounted(() => {
+      handleInit()
       getDetail()
     })
     // 返回
@@ -95,56 +91,64 @@ export default defineComponent({
       postMessage({
         api: 'setBarStatus',
         content: {
-          status: 0
+          status: 1
+        }
+      })
+      postMessage({
+        api: 'setStatusBarVisibility',
+        content: {
+          isVisibility: 1
         }
       })
     })
     return () => (
       <div class={styles.coursewarePlay}>
-        <div class={styles.backBtn} onClick={() => goback()}>
-          <Icon name={iconBack} />
-          返回
-        </div>
-        <div class={styles.menu}>
-          <Tabs v-model:active={data.active} ellipsis={false}>
-            {{
-              default: () => {
-                return data.knowledgePointList.map((n: any) => {
-                  return <Tab title={n.name} name={n.id}></Tab>
-                })
-              }
-              // 'nav-right': () => <div style={{width: '40%'}} class={styles.menuLine}></div>
-            }}
-          </Tabs>
+        <div class={styles.headerContainer}>
+          <div class={styles.backBtn} onClick={() => goback()}>
+            <Icon name={iconBack} />
+            返回
+          </div>
+          <div class={styles.menu}>
+            <Tabs v-model:active={data.active} ellipsis={false}>
+              {{
+                default: () => {
+                  return data.knowledgePointList.map((n: any) => {
+                    return <Tab title={n.name} name={n.id}></Tab>
+                  })
+                }
+                // 'nav-right': () => <div style={{width: '40%'}} class={styles.menuLine}></div>
+              }}
+            </Tabs>
+          </div>
         </div>
         <Tabs class={styles.tabsContent} animated lazyRender={false} v-model:active={data.active}>
           {data.knowledgePointList.map((item: any) => {
             return (
               <Tab name={item.id}>
-                <Swipe vertical lazyRender={false}>
-                  {Array.isArray(item?.materialList) &&
-                    item.materialList.map((m: any) => {
-                      return (
-                        <SwipeItem>
-                          {m.type === 'VIDEO' ? (
-                            <div class={styles.videoItem}>
-                              <video class="player" controls>
-                                <source src={m.content} type="video/mp4" />
-                              </video>
-                            </div>
-                          ) : m.type === 'IMG' ? (
-                            <div class={styles.imgItem}>
-                              <img src={m.content} />
-                            </div>
-                          ) : (
-                            <div class={styles.songItem}>
-                              <MusicScore music={m} />
-                            </div>
-                          )}
-                        </SwipeItem>
-                      )
-                    })}
-                </Swipe>
+                <Swipe style={{ height: '100vh' }} vertical lazyRender={false}>
+                    {Array.isArray(item?.materialList) &&
+                      item.materialList.map((m: any) => {
+                        return (
+                          <SwipeItem>
+                            {m.type === 'VIDEO' ? (
+                              <div class={styles.videoItem}>
+                                <video class="player" controls>
+                                  <source src={m.content} type="video/mp4" />
+                                </video>
+                              </div>
+                            ) : m.type === 'IMG' ? (
+                              <div class={styles.imgItem}>
+                                <img src={m.content} />
+                              </div>
+                            ) : (
+                              <div class={styles.songItem}>
+                                <MusicScore music={m} />
+                              </div>
+                            )}
+                          </SwipeItem>
+                        )
+                      })}
+                  </Swipe>
               </Tab>
             )
           })}