把MoreContent页搬运过来

package.json

@@ -9,6 +9,7 @@
       "lint": "vue-cli-service lint"
     },
     "dependencies": {
+      "@tweenjs/tween.js": "tweenjs/tween.js",
       "@vueuse/core": "^10.11.0",
       "axios": "^1.1.3",
       "core-js": "^3.8.3",

src/components/OperationTip.vue

@@ -0,0 +1,93 @@
+<template>
+  <Transition name="fade-out">
+    <div
+      v-show="isShow"
+      class="operation-tip"
+    >
+      <div
+        v-if="props.text"
+        class="text"
+      >
+        {{ props.text }}
+      </div>
+      <img
+        class=""
+        :src="require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)"
+        alt=""
+        draggable="false"
+      >
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch } from "vue"
+
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps({
+  direction: {
+    type: String,
+    default: 'v', // h
+  },
+  color: {
+    type: String,
+    default: 'white', // 'green'
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  isShow: {
+    type: Boolean,
+    default: true,
+  }
+})
+
+const color = computed(() => {
+  if (props.color === 'white') {
+    return '#fff'
+  } else if (props.color === 'green') {
+    return '#7B916B'
+  } else {
+    return props.color
+  }
+})
+
+const isShow = ref(true)
+const propIsShow = computed(() => {
+  return props.isShow
+})
+watch(propIsShow, (v) => {
+  if (!v) {
+    isShow.value = false
+  }
+})
+// setTimeout(() => {
+//   isShow.value = false
+// }, 2000)
+</script>
+
+<style lang="less" scoped>
+.operation-tip{
+  position: fixed;
+  display: flex;
+  align-items: center;
+  >.text{
+    color: v-bind('color');
+    margin-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: KaiTi;
+    font-weight: 400;
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >img{
+    width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+}
+</style>

src/main.js

@@ -14,7 +14,7 @@ import VueLazyLoad from 'vue3-lazyload'
 
 // import BtnBack from '@/components/BtnBack.vue'
 // import BtnClickMe from '@/components/BtnClickMe.vue'
-// import OperationTip from '@/components/OperationTip.vue'
+import OperationTip from '@/components/OperationTip.vue'
 // import HotspotComp from '@/components/HotspotComp.vue'
 // import HotspotForHomepage from '@/components/HotspotForHomepage.vue'
 import SerialFrames from '@/components/LongImageSerialFrames.vue'
@@ -89,7 +89,7 @@ app.use(store)
   .use(VueLazyLoad)
 //   .component('BtnBack', BtnBack)
 //   .component('BtnClickMe', BtnClickMe)
-//   .component('OperationTip', OperationTip)
+  .component('OperationTip', OperationTip)
 //   .component('HotspotComp', HotspotComp)
 //   .component('HotspotForHomepage', HotspotForHomepage)
 //   .component('Swiper', Swiper)

src/useFunctions/useSmoothSwipe.js

@@ -0,0 +1,213 @@
+import { ref, unref, watch, watchEffect, onMounted, onBeforeUnmount } from 'vue'
+import TWEEN from '@tweenjs/tween.js'
+
+export default function useSmoothSwipe({
+  scrollTargetRef,
+  maxTranslateLength,
+  viewportWidth = document.documentElement.clientWidth,
+  anchorPosList,
+  initialAnchorIdx = 0,
+} = {}) {
+
+  const isOperating = ref(false)
+  const haveSwipedThisTime = ref(false)
+  let hasOperatedThisTimeTimeoutId = null
+
+  let translateLength = ref(anchorPosList[initialAnchorIdx])
+  let maxTranslateLengthInner = Infinity
+
+  let animationFrameId = null
+
+  let tween = null
+  let isTweening = false
+
+  let fingerPosXWhenTouchStart = 0
+
+  let anchorPosListInner = [...anchorPosList].sort((a, b) => {
+    return a > b
+  })
+  let anchorPosListInnerReverse = [...anchorPosListInner].reverse()
+  const currentAnchorIdx = ref(initialAnchorIdx)
+  const goingToAnchorIdx = ref(null)
+
+  watch(isOperating, (v) => {
+    if (v) {
+      clearTimeout(hasOperatedThisTimeTimeoutId)
+      haveSwipedThisTime.value = false
+    } else {
+      clearTimeout(hasOperatedThisTimeTimeoutId)
+      hasOperatedThisTimeTimeoutId = setTimeout(() => {
+        haveSwipedThisTime.value = false
+      }, 333)
+    }
+  })
+
+  // compute maxTranslateLengthInner todo: 不能用if包裹吧？
+  if (maxTranslateLength) {
+    watchEffect(() => {
+      maxTranslateLengthInner = unref(maxTranslateLength) - unref(viewportWidth)
+      if (maxTranslateLengthInner < 0) {
+        maxTranslateLengthInner = 0
+      }
+    })
+  } else if (scrollTargetRef) {
+    watchEffect(() => {
+      if (scrollTargetRef.value) {
+        maxTranslateLengthInner = scrollTargetRef.value.scrollWidth - unref(viewportWidth)
+        if (maxTranslateLengthInner < 0) {
+          maxTranslateLengthInner = 0
+        }
+      } else {
+        maxTranslateLengthInner = Infinity
+      }
+    })
+  }
+
+  function onTouchStart(e) {
+    isOperating.value = true
+    fingerPosXWhenTouchStart = e.changedTouches[0].pageX
+  }
+
+  const onTouchMove = (event) => {
+    if (isTweening) {
+      return
+    }
+
+    let currentX = event.changedTouches[0].pageX
+    let dX = currentX - fingerPosXWhenTouchStart
+    if (dX < -1) { // 左滑，要往右移动
+      const destinationIdx = anchorPosListInner.findIndex((item) => {
+        return item - translateLength.value > 1
+      })
+      if ((destinationIdx !== -1) && !isTweening) {
+        isTweening = true
+        tween = new TWEEN.Tween(translateLength)
+        tween.to({
+          value: anchorPosListInner[destinationIdx],
+        }, 1200)
+        tween.easing(TWEEN.Easing.Cubic.InOut)
+        tween.start()
+        goingToAnchorIdx.value = destinationIdx
+        tween.onComplete(() => {
+          isTweening = false
+          currentAnchorIdx.value = destinationIdx
+          goingToAnchorIdx.value = null
+        })
+      }
+    } else if (dX > 1) {
+      const destinationIdx = anchorPosListInnerReverse.findIndex((item) => {
+        return item - translateLength.value < -1
+      })
+      if ((destinationIdx !== -1) && !isTweening) {
+        isTweening = true
+        tween = new TWEEN.Tween(translateLength)
+        tween.to({
+          value: anchorPosListInnerReverse[destinationIdx],
+        }, 1200)
+        tween.easing(TWEEN.Easing.Cubic.InOut)
+        tween.start()
+        goingToAnchorIdx.value = anchorPosList.length - destinationIdx - 1
+        tween.onComplete(() => {
+          isTweening = false
+          currentAnchorIdx.value = anchorPosList.length - destinationIdx - 1
+          goingToAnchorIdx.value = null
+        })
+      }
+    }
+  }
+
+  const onSwipeLeft = () => {
+    // console.log('在左滑')
+    if (isTweening) {
+      return
+    }
+    const destinationIdx = anchorPosListInner.findIndex((item) => {
+      return item - translateLength.value > 1
+    })
+    if ((destinationIdx !== -1) && !isTweening) {
+      isTweening = true
+      tween = new TWEEN.Tween(translateLength)
+      tween.to({
+        value: anchorPosListInner[destinationIdx],
+      }, 1200)
+      tween.easing(TWEEN.Easing.Cubic.InOut)
+      tween.start()
+      goingToAnchorIdx.value = destinationIdx
+      tween.onComplete(() => {
+        isTweening = false
+        currentAnchorIdx.value = destinationIdx
+        goingToAnchorIdx.value = null
+      })
+    }
+
+  }
+
+  const onswipeRight = () => {
+    // console.log('在左滑')
+    const destinationIdx = anchorPosListInnerReverse.findIndex((item) => {
+      return item - translateLength.value < -1
+    })
+    if ((destinationIdx !== -1) && !isTweening) {
+      isTweening = true
+      tween = new TWEEN.Tween(translateLength)
+      tween.to({
+        value: anchorPosListInnerReverse[destinationIdx],
+      }, 1200)
+      tween.easing(TWEEN.Easing.Cubic.InOut)
+      tween.start()
+      goingToAnchorIdx.value = anchorPosList.length - destinationIdx - 1
+      tween.onComplete(() => {
+        isTweening = false
+        currentAnchorIdx.value = anchorPosList.length - destinationIdx - 1
+        goingToAnchorIdx.value = null
+      })
+    }
+  }
+
+  function onTouchEnd() {
+    isOperating.value = false
+  }
+
+  function onTouchCancel() {
+    isOperating.value = false
+  }
+
+  // 在每一帧更新镜头速度、位置
+  function animationFrameTask() {
+    TWEEN.update()
+    animationFrameId = requestAnimationFrame(animationFrameTask)
+  }
+  onMounted(() => {
+    animationFrameId = requestAnimationFrame(animationFrameTask)
+  })
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(animationFrameId)
+    tween && tween.stop()
+  })
+
+  if (scrollTargetRef) { // todo: 不能用if包裹吧？
+    watch(scrollTargetRef, (v) => {
+      if (v) {
+        v.addEventListener('touchstart', onTouchStart, { passive: true })
+        v.addEventListener('touchmove', onTouchMove, { passive: true })
+        v.addEventListener('touchend', onTouchEnd)
+        v.addEventListener('touchcancel', onTouchCancel)
+      }
+    }, {
+      immediate: true,
+    })
+  }
+
+  return {
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onSwipeLeft,
+    onswipeRight,
+    onTouchCancel,
+    translateLength,
+    haveSwipedThisTime,
+    currentAnchorIdx,
+    goingToAnchorIdx,
+  }
+}

yarn.lock

@@ -1236,6 +1236,10 @@
   resolved "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@tweenjs/tween.js@tweenjs/tween.js":
+  version "23.1.2"
+  resolved "https://codeload.github.com/tweenjs/tween.js/tar.gz/ea96cb35ef31f769bc72c2e4e0a6ebe5bfcdd1a1"
+
 "@types/body-parser@*":
   version "1.19.5"
   resolved "https://registry.npmmirror.com/@types/body-parser/-/body-parser-1.19.5.tgz#04ce9a3b677dc8bd681a17da1ab9835dc9d3ede4"