章节过渡页：定制化的swpie功能

README.md

@@ -6,23 +6,18 @@
 ## 任一存的todos
 
 ### 优化
+内容扩展页 滚动锚点
+
 内容扩展页 按钮边框
 
-内容扩展页 落叶开发
+内容扩展页 标题装饰小圈
 
-内容扩展页 滚动锚定效果开发
+内容扩展页 落叶开发
 
 内容扩展页 回到这一页时复原
 
-内容扩展页 标题装饰小圈
-
 内容扩展页 操作提示文字竖着
 
-### 功能
-转场视频
-
-内容扩展页开发
-
 ### 保存成果
 组件：序列帧
 

src/store/index.js

@@ -10,7 +10,6 @@ import { createStore } from 'vuex'
 export default createStore({
   state: {
     haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
-    isStartupInvisible: true,
     // loginStatus: loginStatusEnum.notLogin,
     // token: '',
     // userInfo: {
@@ -28,9 +27,6 @@ export default createStore({
     setShowingStartup(state, value) {
       state.haveShownStartup = value
     },
-    setIsStartupInvisible(state, value) {
-      state.isStartupInvisible = value
-    }
     // setLoginStatus(state, value) {
     //   state.loginStatus = value
     // },
@@ -68,9 +64,6 @@ export default createStore({
   actions: {
     recordShownStartup({ state, commit }) {
       commit('setShowingStartup', true)
-      setTimeout(() => {
-        commit('setIsStartupInvisible', true)
-      }, 2000)
     },
     // recordPageVisitIfNeeded({ state, commit }, { pageId }) {
     //   let needUpdateStorage = false

src/views/HomeView.vue

@@ -193,7 +193,7 @@
     </div>
 
     <OperationTip
-      v-if="store.state.isStartupInvisible"
+      v-if="isStartupOver"
       class="operation-tip"
       text="了解作品"
       :is-show="isShowOperationTip"
@@ -306,8 +306,17 @@ watch(scrollerElScrollTop, (v) => {
   }
 })
 
-const isStartupInvisible = computed(() => {
-  return store.state.isStartupInvisible
+const haveShownStartup = computed(() => {
+  return store.state.haveShownStartup
+})
+const isStartupOver = ref(false)
+const unwatch = watch(haveShownStartup, (v) => {
+  if (v) {
+    setTimeout(() => {
+      isStartupOver.value = true
+    }, 2000)
+    unwatch()
+  }
 })
 
 const titleOpacity = computed(() => {
@@ -472,7 +481,7 @@ const handletouchstart = (event) => {
 const touchMove = (event) => {
   let currentY = event.changedTouches[0].pageY
   let tY = currentY - fingerPosYWhenTouchStart.value
-  if (tY < -15 && isAtBottomWhenTouchStart.value) {
+  if (tY < -5 && isAtBottomWhenTouchStart.value) {
     isShowVideoFadeToNextPage.value = true
     nextTick(() => {
       videoFadeToNextPageEl.value.play()

src/views/MoreContent.vue

@@ -75,6 +75,9 @@
       </div>
     </div>
 
+    <div class="current-page">
+      {{ currentAnchorIdx }}
+    </div>
     <BtnBack
       @click="router.go(-1)"
     />
@@ -145,10 +148,15 @@ const { width: windowWidth, height: windowHeight } = useWindowSize()
 const maxTranslateLength = computed(() => {
   return windowHeight.value * windowWidthDesign / windowHeightDesign
 })
-const { haveSwipedThisTime, translateLength } = useSmoothSwipe({
+const { haveSwipedThisTime, translateLength, currentAnchorIdx } = useSmoothSwipe({
   scrollTargetRef: scrollTarget,
   maxTranslateLength,
   viewportWidth: windowWidth,
+  anchorPosList: [
+    maxTranslateLength.value * 216 / windowWidthDesign - windowWidth.value / 2,
+    maxTranslateLength.value * 967 / windowWidthDesign - windowWidth.value / 2,
+    maxTranslateLength.value - windowWidth.value
+  ]
 })
 
 const tempBgInitialLeft = 0
@@ -226,7 +234,7 @@ const handletouchstart = (event) => {
 const touchMove = (event) => {
   let currentX = event.changedTouches[0].pageX
   let tX = currentX - fingerPosXWhenTouchStart.value
-  if (tX < -15 && isAtBorderWhenTouchStart.value) {
+  if (tX < -1 && isAtBorderWhenTouchStart.value) {
     router.push({
       name: 'Game',
     })
@@ -313,6 +321,12 @@ const touchMove = (event) => {
       }
     }
   }
+  >.current-page {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+  }
   >.operation-tip{
     position: absolute;
     right: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/views/StartupView.vue

@@ -37,7 +37,7 @@
           alt=""
           draggable="false"
         >
-        开始
+        <span.text>开始</span.text>
       </button>
     </Transition>
 
@@ -155,15 +155,22 @@ function onVideoEnd() {
     line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     >img.bg{
       position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 140%;
+      height: 140%;
       animation-name: spin;
       animation-duration: 1s;
       animation-timing-function: linear;
       animation-iteration-count: infinite;
     }
+    >.text{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 
   >video.transition-video{
@@ -177,10 +184,10 @@ function onVideoEnd() {
 
   @keyframes spin {
     0% {
-      transform: rotate(0deg);
+      transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
-      transform: rotate(360deg);
+      transform: translate(-50%, -50%) rotate(360deg);
     }
   }
 }