翻书

src/views/courseware-list/component/book/index.tsx

@@ -83,13 +83,28 @@ export default defineComponent({
         autoCenter: true,
         duration: 1000,
         acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
-        // pages: 11, // 页码总数
         elevation: 50, // 转换期间页面的高度
         width: data.width, // 宽度 单位 px
         height: data.height, // 高度 单位 px
         gradients: true // 是否显示翻页阴影效果
         // display: 'single', //设置单页还是双页
       });
+      book.bind('start', (event: Event, pageObject: any, corner: any) => {});
+      book.bind('turned', (event: Event, page: any, corner: any) => {
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
+      });
+      book.bind('turned', (e: any, page: any) => {
+        if (page === book.turn('pages')) {
+          nextTick(() => {
+            book.turn('page', 2);
+            nextTick(() => {
+              book.turn('page', 1);
+            })
+          });
+        }
+      });
     };
 
     const getRect = () => {
@@ -119,12 +134,7 @@ export default defineComponent({
               data.show = true;
               timer = setTimeout(() => {
                 book.turn('page', 2);
-                setTimeout(() => {
-                  showGuide.value = true;
-                }, 1500);
               }, 500);
-
-              
             });
           });
         });
@@ -235,11 +245,16 @@ export default defineComponent({
       }
     };
     return () => (
-      <div class={[styles.book, data.show ? '' : styles.bookHide]}>
-        <div class={styles.back} onClick={handleClose}>
+      <div
+        class={[styles.book, data.show ? '' : styles.bookHide]}
+        onClick={handleClose}>
+        <div class={styles.back}>
           <img src={icon_back} />
         </div>
-        <div class="bookWrap" style={{ width: data.width + 'px' }}>
+        <div
+          class="bookWrap"
+          style={{ width: data.width + 'px' }}
+          onClick={(e: Event) => e.stopPropagation()}>
           {!!data.list.length && (
             <div id="flipbook" class={[data.show && 'animated']}>
               <div class="page">
@@ -290,12 +305,19 @@ export default defineComponent({
                 );
               })}
               {data.list.length % 2 === 1 && (
-                <div class="page" style={{ pointerEvents: 'none' }}>
+                <div class="page">
                   <div class={styles.wrap}>
                     <div class={styles.wrapItem}></div>
                   </div>
                 </div>
               )}
+              <div class="page">
+                <div class={styles.wrap}>
+                  <div
+                    class={styles.wrapItem}
+                    style={{ backgroundColor: '#FFD8A1' }}></div>
+                </div>
+              </div>
             </div>
           )}
         </div>

src/views/courseware-list/index.module.less

@@ -1,5 +1,7 @@
 .container {
-  position: relative;
+  position: fixed;
+  left: 0;
+  top: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;