重构

2023-02-06 00:14:05 +08:00 · 2023-02-06 00:14:05 +08:00 · aa5062b06e
commit aa5062b06e
parent ff71c70611
16 changed files with 548 additions and 81 deletions
--- a/src/assets/data/resource.js
+++ b/src/assets/data/resource.js
@ -8,7 +8,7 @@ export default {
      video: 'http://douyin.ttentau.top/0.mp4',
      "video_data_size": 26829508,
      "duration": 427780,
-      "desc": "我不管我们宿舍第一好看",
+      "desc": "1我不管我们宿舍第一好看",
      "allow_download": 0,
      "allow_duet": 0,
      "allow_react": 0,
@ -93,7 +93,7 @@ export default {
      video: 'http://douyin.ttentau.top/1.mp4',
      "video_data_size": 6038796,
      "duration": 90927,
-      "desc": "只要速度够快，小姐姐就追不上...",
+      "desc": "2只要速度够快，小姐姐就追不上...",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -184,7 +184,7 @@ export default {
      video: 'http://douyin.ttentau.top/2.mp4',
      "video_data_size": 8996120,
      "duration": 118703,
-      "desc": "注意安全",
+      "desc": "3注意安全",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -296,7 +296,7 @@ export default {
      video: 'http://douyin.ttentau.top/3.mp4',
      "video_data_size": 12371092,
      "duration": 139652,
-      "desc": "秋天来了，新疆的可可托海~",
+      "desc": "4秋天来了，新疆的可可托海~",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -386,7 +386,7 @@ export default {
      video: 'http://douyin.ttentau.top/5.mp4',
      "video_data_size": 16916839,
      "duration": 384068,
-      "desc": "在地铁上看见一个女生，刷着刷着屏幕突然把手机倒过来，然后露出了诡异的笑容，我基本已经知道她在看什么了",
+      "desc": "5在地铁上看见一个女生，刷着刷着屏幕突然把手机倒过来，然后露出了诡异的笑容，我基本已经知道她在看什么了",
      "allow_download": 0,
      "allow_duet": 0,
      "allow_react": 0,
@ -454,7 +454,7 @@ export default {
      video: 'http://douyin.ttentau.top/6.mp4',
      "video_data_size": 26944285,
      "duration": 276000,
-      "desc": "终于找到爱情公寓拍摄取景地了，熟悉的场景配上熟悉的音乐仿佛青春就在昨天，简直一代一人回忆",
+      "desc": "6终于找到爱情公寓拍摄取景地了，熟悉的场景配上熟悉的音乐仿佛青春就在昨天，简直一代一人回忆",
      "allow_download": 0,
      "allow_duet": 0,
      "allow_react": 0,
@ -522,7 +522,7 @@ export default {
      video: 'http://douyin.ttentau.top/7.mp4',
      "video_data_size": 9321536,
      "duration": 129583,
-      "desc": "一定要跟心爱的人来看一次西岭的日出，at对你很重要的人一起来吧",
+      "desc": "7一定要跟心爱的人来看一次西岭的日出，at对你很重要的人一起来吧",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -620,7 +620,7 @@ export default {
      video: 'http://douyin.ttentau.top/8.mp4',
      "video_data_size": 25251313,
      "duration": 449263,
-      "desc": "这车应该叫啥名字",
+      "desc": "8这车应该叫啥名字",
      "allow_download": 0,
      "allow_duet": 0,
      "allow_react": 0,
@ -692,11 +692,11 @@ export default {
      }
    },
    {
-      "id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
+      "id": "f6e8-0be47c89-4d5d-820a-adsfaswewer",
      video: 'http://douyin.ttentau.top/9.mp4',
      "video_data_size": 17839401,
      "duration": 262127,
-      "desc": "遍历山河，人音值得....",
+      "desc": "9遍历山河，人音值得....",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -769,11 +769,11 @@ export default {
      }
    },
    {
-      "id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
+      "id": "0be47c89-f6e8-wqeq-820a-qerq",
      video: 'http://douyin.ttentau.top/10.mp4',
      "video_data_size": 17839401,
      "duration": 262127,
-      "desc": "当你找不到答案的时候 就来西藏看看。",
+      "desc": "10当你找不到答案的时候 就来西藏看看。",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -853,11 +853,11 @@ export default {
      }
    },
    {
-      "id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
+      "id": "0be47c89-qwerqw-4derq5d-r-072e75c52fbf",
      video: 'http://douyin.ttentau.top/11.mp4',
      "video_data_size": 17839401,
      "duration": 262127,
-      "desc": "在家门口画一个坑，差点被丈母娘打了！",
+      "desc": "11在家门口画一个坑，差点被丈母娘打了！",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -922,11 +922,11 @@ export default {
      }
    },
    {
-      "id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
+      "id": "0be47c89qwerqwerqwerqwerbf",
      video: 'http://douyin.ttentau.top/12.mp4',
      "video_data_size": 17839401,
      "duration": 262127,
-      "desc": "他乡纵有当头月，不抵家乡一盏灯",
+      "desc": "12他乡纵有当头月，不抵家乡一盏灯",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -1013,11 +1013,11 @@ export default {
      }
    },
    {
-      "id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
+      "id": "0be47c8fasdfwer1221312-072e75c52fbf",
      video: 'http://douyin.ttentau.top/13.mp4',
      "video_data_size": 17839401,
      "duration": 262127,
-      "desc": "去爬山游玩不要在乱拍视频了，来...!我教你拍。最后的云海太美啦",
+      "desc": "13去爬山游玩不要在乱拍视频了，来...!我教你拍。最后的云海太美啦",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -1111,11 +1111,11 @@ export default {
      }
    },
    {
-      "id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
+      "id": "0be47cadfasdf23234fbf",
      video: 'http://douyin.ttentau.top/14.mp4',
      "video_data_size": 17839401,
      "duration": 262127,
-      "desc": "这是什么鱼",
+      "desc": "14这是什么鱼",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -1173,11 +1173,11 @@ export default {
      }
    },
    {
-      "id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
+      "id": "0besdfsdfgwe2342123f",
      video: 'http://douyin.ttentau.top/15.mp4',
      "video_data_size": 17839401,
      "duration": 262127,
-      "desc": "这个秋天来成都吧，和喜欢的人一起来看一场日出云海",
+      "desc": "15这个秋天来成都吧，和喜欢的人一起来看一场日出云海",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
@ -1257,11 +1257,11 @@ export default {
      }
    },
    {
-      "id": "0be47c89-f6e8-4d5d-820a-072e75c52fbf",
+      "id": "0be4asdfasdf5466452375c52fbf",
      video: 'http://douyin.ttentau.top/16.mp4',
      "video_data_size": 17839401,
      "duration": 262127,
-      "desc": "水刀的原理，为什么被称为最锋利的刀？",
+      "desc": "16水刀的原理，为什么被称为最锋利的刀？",
      "allow_download": 1,
      "allow_duet": 0,
      "allow_react": 0,
--- a/src/assets/less/custom.less
+++ b/src/assets/less/custom.less
@ -184,6 +184,7 @@ p {
 .slide {
  height: 100%;
  width: 100%;
+  transition: height .3s;

  .slide-list {
    height: 100%;
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -26,7 +26,7 @@
 </template>

 <script>
-import bus from "../utils/bus";
+import bus, {EVENT_KEY} from "../utils/bus";

 export default {
  name: "Footer",
@ -41,8 +41,12 @@ export default {
  },
  created() {
    bus.on('setFooterVisible', (e) => this.visible = e)
-    bus.on('enterFullscreen', (e) => this.visible = false)
-    bus.on('exitFullscreen', (e) => this.visible = true)
+    bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => this.visible = false)
+    bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => this.visible = true)
+  },
+  unmounted() {
+    bus.off(EVENT_KEY.ENTER_FULLSCREEN,)
+    bus.off(EVENT_KEY.EXIT_FULLSCREEN,)
  },
  methods: {
    tab(index) {
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@ -1,7 +1,7 @@
 <template>
  <div class="video-wrapper" ref="videoWrapper" :class="positionName">
    <Loading v-if="loading" style="position: absolute"/>
-    <!--    <video :src="video.video + '?v=123'"-->
+    <!--    <video :src="item.video + '?v=123'"-->
    <video :src="item.video"
           :poster="item.video + videoPoster"
           ref="video"
@ -13,14 +13,16 @@
    <img src="../../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
    <div class="float" :style="{opacity: isUp?0:1}">
      <div :style="{opacity:isMove ? 0:1}" class="normal">
-        <ItemToolbar v-model:item="localItem"
-                     :position="position"
-                     v-bind="$attrs"
-        />
-        <ItemDesc
-            v-model:item="localItem"
-            :position="position"
-        />
+        <template v-if="commentVisible">
+          <ItemToolbar v-model:item="localItem"
+                       :position="position"
+                       v-bind="$attrs"
+          />
+          <ItemDesc
+              v-model:item="localItem"
+              :position="position"
+          />
+        </template>
        <div v-if="isMy" class="comment-status">
          <div class="comment">
            <div class="type-comment">
@ -68,7 +70,7 @@ import Dom from "../../utils/dom";
 import Loading from "../Loading";
 import ItemToolbar from "./ItemToolbar";
 import ItemDesc from "./ItemDesc";
-import bus from "../../utils/bus";
+import bus, {EVENT_KEY} from "../../utils/bus";
 import {SlideItemPlayStatus} from "../../utils/const_var";
 import {computed} from "vue";

@ -79,6 +81,7 @@ export default {
    ItemToolbar,
    ItemDesc
  },
+  inject: ['commentVisible'],
  provide() {
    return {
      // isPlaying: computed(() => this.status)
@ -164,7 +167,14 @@ export default {
      videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
    }
  },
+  watch: {
+    item(newVal) {
+      // console.log('item', newVal)
+      this.localItem = newVal
+    }
+  },
  mounted() {
+    // console.log(this.commentVisible)
    this.height = document.body.clientHeight
    this.width = document.body.clientWidth
    let video = this.$refs.video
@ -218,12 +228,14 @@ export default {
    // eventTester("volumechange", '音量改变'); //音量改变

    console.log('mounted')
-    bus.off('singleClickBroadcast')
+    // bus.off('singleClickBroadcast')
    bus.on('singleClickBroadcast', this.click)
+    // bus.on(EVENT_KEY.TOGGLE_COMMENT, (e) => this.commentVisible = !this.commentVisible)
  },
  unmounted() {
    console.log('unmounted')
    bus.off('singleClickBroadcast', this.click)
+    // bus.off(EVENT_KEY.TOGGLE_COMMENT,)
  },
  methods: {
    click(val) {
--- a/src/pages/slide/IndicatorHome.vue
+++ b/src/pages/slide/IndicatorHome.vue
@ -42,7 +42,7 @@
      <div class="l-button" :class="{active:type === 2}" @click="toggleType(2)">热点</div>
    </div>

-    <Loading :style="loadingStyle" class="loading" style="width: 4rem;" :is-full-screen="false"/>
+    <Loading :style="loadingStyle" class="loading" style="width: 40rem;" :is-full-screen="false"/>
  </div>
 </template>
 <script>
--- a/src/pages/slideComponent/TestItem.vue
+++ b/src/pages/slideComponent/TestItem.vue
@ -0,0 +1,29 @@
+<template>
+  <div class="big">{{ props.item.desc }}</div>
+</template>
+
+<script setup>
+import {onMounted, onUnmounted} from "vue";
+
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+})
+
+onMounted(()=>{
+  console.log('onMounted',props.item.desc)
+})
+
+onUnmounted(()=>{
+  console.log('onUnmounted',props.item.desc)
+})
+
+</script>
+
+<style scoped>
+
+</style>
--- a/src/pages/slideComponent/V.vue
+++ b/src/pages/slideComponent/V.vue
@ -0,0 +1,168 @@
+<script setup lang="jsx">
+import {computed, onMounted, reactive, ref, watch} from "vue";
+import GM from '../../utils'
+import {
+  getSlideDistance,
+  slideInit,
+  slideReset,
+  slideTouchEnd,
+  slideTouchMove,
+  slideTouchStart
+} from "../slideHooks/common";
+import {SlideType} from "../../utils/const_var";
+import SlideItem from "@/pages/slideHooks/SlideItem.vue";
+import TestItem from "@/pages/slideComponent/TestItem.vue";
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: () => {
+      return 0
+    }
+  },
+  position: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  render: {
+    type: Function,
+    default: () => {
+      return null
+    }
+  },
+  list: {
+    type: Array,
+    default: () => {
+      return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
+    }
+  },
+  virtualTotal: {
+    type: Number,
+    default: () => 5
+  },
+  name: {
+    type: String,
+    default: () => ''
+  },
+})
+const emit = defineEmits(['update:index', 'loadMore'])
+
+const judgeValue = 20
+const wrapperEl = ref(null)
+const state = reactive({
+  name: 'SlideVertical',
+  localIndex: props.index,
+  needCheck: true,
+  next: false,
+  start: {x: 0, y: 0, time: 0},
+  move: {x: 0, y: 0},
+  wrapper: {width: 0, height: 0, childrenLength: 0},
+  cs: [],
+  styleTop: 0,
+  components: {
+    one: <SlideItem class=" gray">
+      <div class="big">热点0</div>
+    </SlideItem>,
+    two: <SlideItem class=" gray">
+      <div class="big">热点1</div>
+    </SlideItem>,
+    three: <SlideItem class=" gray">
+      <div class="big">热点2</div>
+    </SlideItem>,
+    four: <SlideItem class=" gray">
+      <div class="big">热点3</div>
+    </SlideItem>,
+    five: <SlideItem class=" gray">
+      <div class="big">热点4</div>
+    </SlideItem>,
+  }
+})
+
+function r(item) {
+  let node = props.render(item, state.localIndex, true, props.position)
+  return <SlideItem class="slideItemClassName">
+    {node}
+  </SlideItem>
+}
+
+watch(
+    () => props.index,
+    (newVal) => {
+      if (state.localIndex !== newVal) {
+        state.localIndex = newVal
+        GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
+        GM.$setCss(wrapperEl.value, 'transform', `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`)
+      }
+    }
+)
+
+onMounted(() => {
+  slideInit(wrapperEl.value, state, SlideType.VERTICAL)
+  state.cs = props.list.slice(0, props.virtualTotal).map((v, i) => r(v))
+})
+
+function touchStart(e) {
+  slideTouchStart(e, wrapperEl.value, state)
+}
+
+function touchMove(e) {
+  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
+}
+
+function touchEnd(e) {
+  slideTouchEnd(e, state, canNext, (isNext) => {
+    console.log('state.localIndex', state.localIndex)
+    let half = (props.virtualTotal + 1) / 2
+    if (props.list.length > props.virtualTotal) {
+      if (isNext) {
+        if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex > half) {
+          console.log('loadMore')
+          emit('loadMore')
+        }
+        if (state.localIndex >= half && state.localIndex <= props.list.length - half) {
+          console.log('push')
+          // state.cs = props.list.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))
+          state.cs.shift()
+          state.cs.push(r(props.list[state.localIndex + (half - 1)]))
+          state.styleTop = (state.localIndex - 2) * state.wrapper.height
+        }
+      } else {
+        //这里先加个1，保持if表达式一致
+        let judgeIndex = state.localIndex + 1
+        if (judgeIndex >= half && judgeIndex <= props.list.length - half) {
+          console.log('unshift')
+          state.cs.unshift(r(props.list[state.localIndex - (half - 1)]))
+          state.cs.pop()
+          state.styleTop = (state.localIndex - 2) * state.wrapper.height
+        }
+      }
+    }
+    if (state.localIndex < half) {
+      console.log('--')
+      state.styleTop = 0
+    }
+
+  }, null, SlideType.VERTICAL)
+  slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
+}
+
+
+function canNext(isNext) {
+  return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.list.length - 1 && isNext));
+}
+</script>
+
+<template>
+  <div class="slide v">
+    <div class="slide-list flex-direction-column"
+         ref="wrapperEl"
+         @touchstart="touchStart"
+         @touchmove="touchMove"
+         @touchend="touchEnd"
+    >
+      <component :style='{top: state.styleTop + "px"}' :is="v" v-for="(v,i) in state.cs" :key="v.id"/>
+    </div>
+  </div>
+</template>
--- a/src/pages/slideComponent/index.vue
+++ b/src/pages/slideComponent/index.vue
@ -0,0 +1,180 @@
+<template>
+  <div class="test-slide-wrapper" id="slideHook" v-love="'slideHook'">
+    <V
+        name="main"
+        v-model:index="state.itemIndex"
+        :render="render"
+        @loadMore="loadMore"
+        :list="state.recommendVideos"
+        :position="{
+                  baseIndex:0,
+                  navIndex:5,
+                }"
+    >
+    </V>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import V from './V.vue'
+import SlideImgs from "../../components/slide/SlideAlbum";
+import BVideo from "../../components/slide/BVideo";
+import Comment from "../../components/Comment";
+
+import resource from "../../assets/data/resource.js";
+import {onMounted, onUnmounted, provide, reactive} from "vue";
+import bus, {EVENT_KEY} from "../../utils/bus";
+import {useNav} from "../../utils/hooks/useNav";
+
+const nav = useNav()
+
+const videos = resource.videos.slice(0, 7).map((v, i) => {
+  v.type = 'recommend-video'
+  // v.desc = i + v.desc
+  return v
+})
+
+const state = reactive({
+  baseIndex: 0,
+  navIndex: 4,
+  itemIndex: 0,
+  recommendVideos: [
+    // {
+    //   type: 'img',
+    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+    // },
+    // {
+    //   type: 'imgs',
+    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+    // },
+    ...videos
+  ],
+
+  isCommenting: false,
+  isSharing: false,
+  canMove: true,
+  loading: false,
+  isUp: false,
+
+  shareType: -1,
+
+  showPlayFeedback: false,
+  showShareDuoshan: false,
+  showShareDialog: false,
+  showShare2WeChatZone: false,
+  showDouyinCode: false,
+  showFollowSetting: false,
+  showFollowSetting2: false,
+  showBlockDialog: false,
+  showChangeNote: false,
+  shareToFriend: false,
+
+  commentVisible: false,
+})
+provide('commentVisible', () => state.commentVisible)
+
+onMounted(() => {
+  bus.on('singleClick', () => {
+    let id = ''
+    // if (state.navIndex === 5) {
+    if (true) {
+      id = state.recommendVideos[state.itemIndex].id
+    }
+    bus.emit('singleClickBroadcast', id)
+  })
+  bus.on('update:item', val => {
+    const {baseIndex, navIndex, itemIndex} = val.position
+    if (navIndex === 5) {
+      state.recommendVideos[itemIndex] = val.item
+    }
+  })
+  bus.on('nav', path => nav(path))
+})
+onUnmounted(() => {
+  bus.offAll()
+})
+
+function loadMore() {
+  return
+  state.recommendVideos = state.recommendVideos.concat(resource.videos.slice(0, 10).map((v, i) => {
+    v.type = 'recommend-video'
+    return v
+  }))
+}
+
+function test() {
+  state.commentVisible = true
+  bus.emit(EVENT_KEY.TOGGLE_COMMENT,)
+}
+
+function render(item, itemIndex, play, position) {
+  let node
+  if (item.type === 'img') {
+    node = <img src={item.src} style="height:100%;"/>
+  }
+  if (item.type === 'imgs') {
+    node = <SlideImgs/>
+  }
+  if (item.type === 'recommend-video') {
+    node = <BVideo
+        isPlay={false}
+        item={item}
+        position={{...position, itemIndex}}
+        onShowComments={test}
+        onShowShare={e => state.isSharing = true}
+        onGoUserInfo={e => state.baseIndex = 1}
+    />
+  }
+  return node
+
+  return <SlideItem class="slideItemClassName">
+    {node}
+  </SlideItem>
+}
+
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+.test-slide-wrapper {
+  font-size: 24rem;
+  width: 100%;
+  height: 100%;
+  color: white;
+
+  span {
+    color: white;
+    font-size: 24rem;
+  }
+
+  .big {
+    font-weight: bold;
+    font-size: 100rem;
+  }
+}
+
+.h {
+  width: 90vw;
+  height: 80vh;
+  //height: calc(100vh - @footer-height);
+  overflow: hidden;
+
+  .red {
+    background-color: red;
+  }
+
+  .yellow {
+    background-color: yellow;
+  }
+
+  .blue {
+    background-color: blue;
+  }
+
+  .gray {
+    background-color: gray;
+  }
+}
+
+</style>
--- a/src/pages/slideHooks/H.vue
+++ b/src/pages/slideHooks/H.vue
@ -68,7 +68,7 @@ function canNext(isNext) {
 </script>

 <template>
-  <div class="slide">
+  <div class="slide hhhh">
    <div class="slide-list"
         ref="wrapperEl"
         @touchstart="touchStart"
--- a/src/pages/slideHooks/SlideItem.vue
+++ b/src/pages/slideHooks/SlideItem.vue
@ -12,5 +12,6 @@
  height: 100%;
  width: 100%;
  flex-shrink: 0;
+  position: relative;
 }
 </style>
--- a/src/pages/slideHooks/V.vue
+++ b/src/pages/slideHooks/V.vue
@ -61,7 +61,7 @@ function canNext(isNext) {
 </script>

 <template>
-  <div class="slide">
+  <div class="slide v">
    <div class="slide-list flex-direction-column"
         ref="wrapperEl"
         @touchstart="touchStart"
--- a/src/pages/slideHooks/VInfinite.vue
+++ b/src/pages/slideHooks/VInfinite.vue
@ -203,7 +203,7 @@ function canNext(isNext) {
 </script>

 <template>
-  <div class="slide">
+  <div class="slide v-infinite">
    <div class="slide-list flex-direction-column"
         ref="wrapperEl"
         @click="null"
--- a/src/pages/slideHooks/index.vue
+++ b/src/pages/slideHooks/index.vue
@ -54,7 +54,7 @@
      </SlideItem>
    </H>
  </div>
-  <Comment page-id="slideHook" v-model="state.isCommenting"/>
+  <Comment page-id="slideHook" v-model="state.commentVisible"/>
 </template>

 <script setup lang="jsx">
@ -67,8 +67,8 @@ import Comment from "../../components/Comment";
 import IndicatorHome from "../slide/IndicatorHome";

 import resource from "../../assets/data/resource.js";
-import {onMounted, onUnmounted, reactive} from "vue";
-import bus from "../../utils/bus";
+import {onMounted, onUnmounted, provide, reactive} from "vue";
+import bus, {EVENT_KEY} from "../../utils/bus";
 import {useNav} from "../../utils/hooks/useNav";

 const nav = useNav()
@ -78,7 +78,6 @@ const videos = resource.videos.slice(0, 6).map(v => {
  return v
 })

-
 const state = reactive({
  baseIndex: 0,
  navIndex: 4,
@ -113,7 +112,10 @@ const state = reactive({
  showBlockDialog: false,
  showChangeNote: false,
  shareToFriend: false,
+
+  commentVisible: false,
 })
+provide('commentVisible', () => state.commentVisible)

 onMounted(() => {
  bus.on('singleClick', () => {
@ -135,6 +137,11 @@ onUnmounted(() => {
  bus.offAll()
 })

+function test() {
+  state.commentVisible = true
+  bus.emit(EVENT_KEY.TOGGLE_COMMENT,)
+}
+
 function render(item, itemIndex, play, position) {
  let node
  if (item.type === 'img') {
@ -148,7 +155,7 @@ function render(item, itemIndex, play, position) {
        isPlay={false}
        item={item}
        position={{...position, itemIndex}}
-        onShowComments={e => state.isCommenting = true}
+        onShowComments={test}
        onShowShare={e => state.isSharing = true}
        onGoUserInfo={e => state.baseIndex = 1}
    />
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@ -2,8 +2,9 @@
  <!--  <TestSlide></TestSlide>-->
  <!--  <SlideUser></SlideUser>-->
 <!--  <SlideImgs></SlideImgs>-->
-    <slideHooks></slideHooks>
 <!--  <TestSwiperJs></TestSwiperJs>-->
+<!--      <slideHooks></slideHooks>-->
+  <slideComponent></slideComponent>

  <!--  <div class="body">-->
  <!--    <div class="wrapper">-->
@ -19,6 +20,7 @@ import SlideUser from "../../components/slide/SlideUser";
 import SlideImgs from "../../components/slide/SlideAlbum";
 import TestImg from "./TestImg";
 import slideHooks from '../slideHooks'
+import slideComponent from '../slideComponent'
 import TestSwiperJs from "./TestSwiperJs";
 import {mat4} from "gl-matrix";

@ -30,7 +32,8 @@ export default {
    SlideUser,
    SlideImgs,
    TestImg,
-    TestSwiperJs
+    TestSwiperJs,
+    slideComponent
  },
  data() {
    return {
--- a/src/pages/test/TestSwiperJs.vue
+++ b/src/pages/test/TestSwiperJs.vue
@ -1,42 +1,99 @@
 <template>
-  <swiper :modules="[Virtual]" :space-between="50" virtual>
-    <swiper-slide
-        v-for="(slideContent, index) in slides"
-        :key="index"
-        :virtualIndex="index"
+  <div class="slide">
+    <div class="slide-list"
+         ref="wrapperEl"
+         @touchstart="touchStart"
+         @touchmove="touchMove"
+         @touchend="touchEnd"
    >
-      <div class="aa">{{ slideContent }}</div>
-    </swiper-slide
-    >
-  </swiper>
+      <slot></slot>
+    </div>
+  </div>
+
 </template>
-<script>
-import {Virtual} from 'swiper';
-import {Swiper, SwiperSlide} from 'swiper/vue';
+<script lang="jsx" setup>
 import SlideItem from "../slideHooks/SlideItem";
-import "swiper/css";
-import "swiper/css/virtual";
+import {onMounted, reactive, ref, watch} from "vue";
+import GM from "@/utils";
+import {
+  getSlideDistance,
+  slideInit,
+  slideReset,
+  slideTouchEnd,
+  slideTouchMove,
+  slideTouchStart
+} from "@/pages/slideHooks/common";
+import {SlideType} from "@/utils/const_var";
+
+const emit = defineEmits(['update:index'])
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: () => {
+      return 0
+    }
+  },
+  name: {
+    type: String,
+    default: () => ''
+  },
+})
+const judgeValue = 20
+const wrapperEl = ref(null)
+const state = reactive({
+  name: props.name,
+  localIndex: props.index,
+  needCheck: true,
+  next: false,
+  start: {x: 0, y: 0, time: 0},
+  move: {x: 0, y: 0},
+  wrapper: {width: 0, height: 0, childrenLength: 0},


-export default {
-  components: {
-    SlideItem,
-    Swiper,
-    SwiperSlide,
-  },
-  setup() {
-    // Create array with 1000 slides
-    const slides = Array.from({length: 1000}).map(
-        (el, index) => `Slide ${index + 1}`
-    );
-    return {
-      slides,
-      Virtual,
-    };
-  },
-};
+})
+
+watch(
+    () => props.index,
+    (newVal) => {
+      if (state.localIndex !== newVal) {
+        state.localIndex = newVal
+        GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
+        GM.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`)
+      }
+    }
+)
+
+onMounted(() => {
+  slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
+})
+
+function touchStart(e) {
+  slideTouchStart(e, wrapperEl.value, state)
+}
+
+function touchMove(e) {
+  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.HORIZONTAL)
+}
+
+function touchEnd(e) {
+  slideTouchEnd(e, state, canNext, () => {
+
+  })
+  slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
+}
+
+
+function canNext(isNext) {
+  return !((state.localIndex === 0 && !isNext) || (state.localIndex === state.wrapper.childrenLength - 1 && isNext));
+}
 </script>
-<style lang="less">
+<style lang="less" scoped>
+.page {
+  font-size: 14rem;
+  color: white;
+}
+
 .swiper {
  height: 50vh;
  //width: 100%;
--- a/src/utils/bus.js
+++ b/src/utils/bus.js
@ -38,3 +38,8 @@ export default {
  }
 }

+export const EVENT_KEY = {
+  ENTER_FULLSCREEN: 'ENTER_FULLSCREEN',
+  EXIT_FULLSCREEN: 'EXIT_FULLSCREEN',
+  TOGGLE_COMMENT: 'TOGGLE_COMMENT',
+}