shabi

README.md

@@ -9,15 +9,17 @@
 邵总
 
 ### 优化
-内容扩展页 按钮边框 todo
+内容扩展页 按钮边框 上下空间大小不对称
 
 内容扩展页 落叶开发
 
-内容扩展页 回到这一页时复原
-
 内容扩展页 操作提示文字竖着
 
+开始按钮位置 不同屏幕里适配
+
 ### 保存成果
 组件：序列帧
 
-useFunction: useSmoothSwipe.js
+useFunction: useSmoothSwipe.js
+
+避免滑动触发浏览器原生行为的方法

src/useFunctions/useSmoothSwipe.js

@@ -6,13 +6,14 @@ export default function useSmoothSwipe({
   maxTranslateLength,
   viewportWidth = document.documentElement.clientWidth,
   anchorPosList,
+  initialAnchorIdx = 0,
 } = {}) {
 
   const isOperating = ref(false)
   const haveSwipedThisTime = ref(false)
   let hasOperatedThisTimeTimeoutId = null
 
-  let translateLength = ref(anchorPosList[0])
+  let translateLength = ref(anchorPosList[initialAnchorIdx])
   let maxTranslateLengthInner = Infinity
 
   let animationFrameId = null
@@ -26,7 +27,7 @@ export default function useSmoothSwipe({
     return a > b
   })
   let anchorPosListInnerReverse = [...anchorPosListInner].reverse()
-  const currentAnchorIdx = ref(0)
+  const currentAnchorIdx = ref(initialAnchorIdx)
 
   watch(isOperating, (v) => {
     if (v) {

src/views/BambooBookView.vue

@@ -1,18 +1,23 @@
 <script setup>
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 import BambooBookScene1 from '@/views/BambooBookScene1.vue'
 import BambooBookScene2 from '@/views/BambooBookScene2.vue'
 import BambooBookScene3 from '@/views/BambooBookScene3.vue'
 
-
-
-
 // 当前滑动到第几屏
 const curIndex = ref(0)
 
 const toBack = () => {
-  window.history.back()
+  router.push({
+    name: 'MoreContent',
+    query: {
+      anchorIdx: 1,
+    }
+  })
 }
 
 // 第三屏

src/views/BambooHotView.vue

@@ -1,7 +1,10 @@
 <script setup>
 import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
+const router = useRouter()
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -125,7 +128,12 @@ const scrollFn = () => {
 }
 
 const goBack = () => {
-  window.history.back()
+  router.push({
+    name: 'MoreContent',
+    query: {
+      anchorIdx: 0,
+    }
+  })
 }
 
 

src/views/MoreContent.vue

@@ -214,7 +214,9 @@
       />
     </div>
     <BtnBack
-      @click="router.go(-1)"
+      @click="router.push({
+        name: 'HomeView',
+      })"
     />
 
     <OperationTip
@@ -291,13 +293,16 @@ const { haveSwipedThisTime, translateLength, currentAnchorIdx } = useSmoothSwipe
     maxTranslateLength.value * 216 / windowWidthDesign - windowWidth.value / 2,
     maxTranslateLength.value * 967 / windowWidthDesign - windowWidth.value / 2,
     maxTranslateLength.value - windowWidth.value
-  ]
+  ],
+  initialAnchorIdx: Number(route.query.anchorIdx)
 })
 
 const bgInitialLeft = 0
 const bgLeft = ref(bgInitialLeft)
 watch(translateLength, (v) => {
   bgLeft.value = bgInitialLeft - v
+}, {
+  immediate: true,
 })
 
 const layer4SpeedFactor = 0.8 * 0.8 * 0.8
@@ -305,6 +310,8 @@ const layer4InitialLeft = 0
 const layer4Left = ref(layer4InitialLeft)
 watch(translateLength, (v) => {
   layer4Left.value = layer4InitialLeft - v * layer4SpeedFactor
+}, {
+  immediate: true,
 })
 
 const layer3SpeedFactor = 0.8 * 0.8
@@ -312,6 +319,8 @@ const layer3InitialLeft = 0
 const layer3Left = ref(layer3InitialLeft)
 watch(translateLength, (v) => {
   layer3Left.value = layer3InitialLeft - v * layer3SpeedFactor
+}, {
+  immediate: true,
 })
 
 const layer2SpeedFactor = 0.8
@@ -319,12 +328,16 @@ const layer2InitialLeft = 0
 const layer2Left = ref(layer2InitialLeft)
 watch(translateLength, (v) => {
   layer2Left.value = layer2InitialLeft - v * layer2SpeedFactor
+}, {
+  immediate: true,
 })
 
 const layer1InitialLeft = 0
 const layer1Left = ref(layer1InitialLeft)
 watch(translateLength, (v) => {
   layer1Left.value = layer1InitialLeft - v
+}, {
+  immediate: true,
 })
 
 const isShowOperationTip = ref(true)
@@ -390,6 +403,8 @@ watch(currentAnchorIdx, (v) => {
       name: 'Game',
     })
   }
+}, {
+  immediate: true,
 })
 </script>
 

src/views/PaintingList.vue

@@ -152,7 +152,12 @@
     </ul>
     <BtnBack
       class="button-back"
-      @click="router.go(-1)"
+      @click="router.push({
+        name: 'MoreContent',
+        query: {
+          anchorIdx: 1,
+        }
+      })"
     />
     <OperationTip
       class="operation-tip"

src/views/PoemList.vue

@@ -99,7 +99,12 @@
     <BtnBack
       v-show="!isShowMenu"
       class="button-back"
-      @click="router.go(-1)"
+      @click="router.push({
+        name: 'MoreContent',
+        query: {
+          anchorIdx: 1,
+        }
+      })"
     />
     <Transition
       v-show="isShowOperationTipShadow"

src/views/ShuangGouSheSeDetail.vue

@@ -5,7 +5,12 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 const router = useRouter()
 
 const goBack = () => {
-  window.history.back()
+  router.push({
+    name: 'MoreContent',
+    query: {
+      anchorIdx: 0,
+    }
+  })
 }
 
 const {