fix:修改竹谱滑动方式

src/views/BambooBookScene1.vue

@@ -19,11 +19,13 @@ const touchMove = (event) => {
   let currentX = event.changedTouches[0].pageX
   let tx = currentX - lastX.value
   if (tx < 0) {
-    emit('slide')
+    emit('slide-right')
+  } else if ( tx > 0 ) {
+    emit('slide-left')
   }
 }
 
-const emit = defineEmits(['slide', 'close'])
+const emit = defineEmits(['slide-right', 'slide-left', 'close'])
 
 const x = window.innerHeight / 1018
 
@@ -71,7 +73,9 @@ const innerHeight = ref(window.innerHeight + 'px')
 .screen-box {
   width: 100%;
   height: 100%;
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
 
   .xuliezheng {
     width: v-bind(innerWidth);
@@ -166,4 +170,6 @@ const innerHeight = ref(window.innerHeight + 'px')
   }
 
 }
+
+
 </style>

src/views/BambooBookScene2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 
@@ -14,18 +14,50 @@ import yeImg from '@/assets/images/ye.png'
 // 杆-1 枝-2 叶-3
 const curPart = ref(0)
 
-const emit = defineEmits(['next', 'close'])
+const emit = defineEmits(['next', 'close', 'slide-left'])
+const props = defineProps({
+  ischange: {
+    type: Boolean,
+    default: false
+  }
+})
+
+
+watch(
+  () => props.ischange, // 第一个参数可以是一个getter函数，这里直接观察someProp的值
+  (newVal, oldVal) => {
+    if (newVal) {
+      console.log('变了')
+      setTimeout(() => {
+        curPart.value = 1
+      }, 300)
+    }
+  },
+  { immediate: true }
+)
+
+const lastX = ref(0)
+
+// 开始滑动
+const handletouchstart = (event) => {
+  lastX.value = event.changedTouches[0].pageX
+}
+
+// 监听活动
+const touchMove = (event) => {
+  let currentX = event.changedTouches[0].pageX
+  let tx = currentX - lastX.value
+  if (tx < 0) {
+  } else if (tx > 0) {
+    emit('slide-left')
+  }
+}
 
 
 // 叶子图片适应
 
 const x = window.innerWidth / window.innerHeight
 
-onMounted(() => {
-  setTimeout(() => {
-    curPart.value = 1
-  }, 1500)
-})
 
 
 const {
@@ -35,7 +67,11 @@ const {
 </script>
 
 <template>
-  <div class="screen-box">
+  <div
+    class="screen-box"
+    @touchstart="handletouchstart($event)"
+    @touchmove="touchMove($event)"
+  >
     <!-- <transition name="fade-in-out" /> -->
     <div class="screen-box2">
       <div class="title-disc">
@@ -101,7 +137,9 @@ const {
 .screen-box {
   width: 100%;
   height: 100%;
-  position: relative;
+  position: absolute;
+  left: 0;
+  top: 0;
 
   .screen-box2 {
     width: 100%;

src/views/BambooBookScene3.vue

@@ -166,7 +166,9 @@ onMounted(() => {
 .screen-box {
   width: 100%;
   height: 100%;
-  position: relative;
+  position: absolute;
+  top:0;
+  left:0;
 
   .screen-box3 {
     width: 100%;

src/views/BambooBookView.vue

@@ -20,17 +20,18 @@ const toBack = () => {
   })
 }
 
-// 第三屏
-const curPart = ref(0)
 
 const data1 = configZhuPu['杆']
 const data2 = configZhuPu['枝']
 const data3 = configZhuPu['叶']
 
 const curList = ref([])
+const isStart = ref(true)
+const isBack = ref(false)
 
 const NextPage = (curPart) => {
-  curIndex.value = 2
+  // curIndex.value = 2
+  isShowIndex3.value = true
   switch (curPart) {
   case 1:
     curList.value = data1
@@ -43,6 +44,20 @@ const NextPage = (curPart) => {
     return
   }
 }
+const isChange = ref(false)
+const onSlideRight = () => {
+  curIndex.value = 1
+  isChange.value = true
+  console.log('滑动变化了，通知第二个页面开始倒计时', isChange.value)
+}
+const onSlideLeft = () => {
+  isStart.value = false
+  curIndex.value = 0
+}
+
+const isShowIndex3 = ref(false)
+//  :class="{ 'onRight1':curIndex == 0, 'onLeft1':curIndex == 1,'goLeft1': curIndex === 1, 'goRight1': curIndex === 0 }"
+
 
 </script>
 
@@ -50,26 +65,34 @@ const NextPage = (curPart) => {
   <div class="home">
     <!-- 第一屏 -->
     <Transition name="fade-in-out">
-      <BambooBookScene1
-        v-if="curIndex === 0"
-        @slide="() => {curIndex = 1}"
-        @close="toBack"
-      />
+      <div class="page1">
+        <BambooBookScene1
+          v-if="curIndex !== 2"
+          :class="{ 'goLeft1':curIndex === 1,'goRight1':curIndex === 0 && !isStart }"
+          @slide-right="onSlideRight"
+          @close="toBack"
+        />
+        <BambooBookScene2
+          v-if="curIndex == 1 || curIndex == 0 && !isStart"
+          :class="{ 'goLeft2':curIndex === 1 ,'goRight2':curIndex === 0 && !isStart && !isBack}"
+          class="onRight2"
+          :ischange="isChange"
+          @slide-left="onSlideLeft"
+          @next="NextPage"
+          @close="onSlideLeft"
+        />
+      </div>
     </Transition>
     <!-- 第二屏 -->
-    <Transition name="fade-in-out">
-      <BambooBookScene2
-        v-if="curIndex === 1"
-        @next="NextPage"
-        @close="() => {curIndex = 0}"
-      />
-    </Transition>
+    <!-- <Transition name="fade-in-out">
+
+    </Transition> -->
     <!-- 第三屏 -->
     <Transition name="fade-in-out">
       <BambooBookScene3
-        v-if="curIndex === 2"
+        v-if="isShowIndex3"
         :list="curList"
-        @close="() => {curIndex = 1}"
+        @close="() => { isShowIndex3 = false }"
       />
     </Transition>
   </div>
@@ -79,5 +102,85 @@ const NextPage = (curPart) => {
 .home {
   width: 100%;
   height: 100%;
+  // .onRight1{
+
+  // }
+  .page1 {
+    width: 100%;
+    height: 100%;
+
+    .onLeft1{
+      transform: translateX(-100%);
+    }
+    .onLeft2{
+      transform: translateX(0%);
+    }
+
+    .onRight1{
+      transform: translateX(0%);
+    }
+
+    .onRight2 {
+      transform: translateX(100%)
+    }
+
+    .goLeft1 {
+      animation: on-left1 2s forwards;
+
+      @keyframes on-left1 {
+        0% {
+          transform: translateX(0);
+        }
+
+        100% {
+          transform: translateX(-100%);
+        }
+      }
+    }
+
+    .goLeft2 {
+      animation: on-left2 2s forwards;
+
+      @keyframes on-left2 {
+        0% {
+          transform: translateX(100%);
+        }
+
+        100% {
+          transform: translateX(0%);
+        }
+      }
+    }
+
+    .goRight1 {
+      animation: on-right1 2s forwards;
+
+      @keyframes on-right1 {
+        0% {
+          transform: translateX(-100%);
+        }
+
+        100% {
+          transform: translateX(0%);
+        }
+      }
+    }
+
+    .goRight2 {
+      animation: on-right2 2s forwards;
+
+      @keyframes on-right2 {
+        0% {
+          transform: translateX(0%);
+        }
+
+        100% {
+          transform: translateX(100%);
+        }
+      }
+    }
+  }
+
+
 }
 </style>