From de47f9a8e5e2fc8caeb474f5bb54ba256a593041 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Mon, 6 Feb 2023 00:39:01 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/slide/BVideo.vue              |   6 -
 src/pages/slideComponent/TestItem.vue        |  29 ---
 src/pages/slideComponent/V.vue               | 168 -----------------
 src/pages/slideComponent/index.vue           | 180 ------------------
 src/pages/slideHooks/VInfinite-Component.vue | 186 +++++++++++++++++++
 src/pages/test/Test.vue                      |   9 +-
 6 files changed, 189 insertions(+), 389 deletions(-)
 delete mode 100644 src/pages/slideComponent/TestItem.vue
 delete mode 100644 src/pages/slideComponent/V.vue
 delete mode 100644 src/pages/slideComponent/index.vue
 create mode 100644 src/pages/slideHooks/VInfinite-Component.vue

diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue
index 95d737c..65b85f7 100644
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@@ -167,12 +167,6 @@ 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
diff --git a/src/pages/slideComponent/TestItem.vue b/src/pages/slideComponent/TestItem.vue
deleted file mode 100644
index a5073fa..0000000
--- a/src/pages/slideComponent/TestItem.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/pages/slideComponent/V.vue b/src/pages/slideComponent/V.vue
deleted file mode 100644
index 46f239d..0000000
--- a/src/pages/slideComponent/V.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<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>
diff --git a/src/pages/slideComponent/index.vue b/src/pages/slideComponent/index.vue
deleted file mode 100644
index 733fd29..0000000
--- a/src/pages/slideComponent/index.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/pages/slideHooks/VInfinite-Component.vue b/src/pages/slideHooks/VInfinite-Component.vue
new file mode 100644
index 0000000..7519486
--- /dev/null
+++ b/src/pages/slideHooks/VInfinite-Component.vue
@@ -0,0 +1,186 @@
+<!--<script setup lang="jsx">-->
+<!--import {computed, onMounted, reactive, ref, watch} from "vue";-->
+<!--import GM from '../../utils'-->
+<!--import {-->
+<!--  getSlideDistance,-->
+<!--  slideInit,-->
+<!--  slideReset,-->
+<!--  slideTouchEnd,-->
+<!--  slideTouchMove,-->
+<!--  slideTouchStart-->
+<!--} from "./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, index = -1) {-->
+<!--  let node = props.render(item, state.localIndex, index === 0, 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)`)-->
+<!--      }-->
+<!--    }-->
+<!--)-->
+
+<!--watch(-->
+<!--    () => props.list,-->
+<!--    (newVal) => {-->
+<!--      console.log('list', newVal)-->
+<!--      let half = (props.virtualTotal + 1) / 2-->
+<!--      if (state.localIndex >= half) {-->
+<!--        state.cs = newVal.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))-->
+<!--        state.styleTop = (state.localIndex - 2) * state.wrapper.height-->
+<!--      }-->
+<!--    }-->
+<!--)-->
+
+<!--onMounted(() => {-->
+<!--  slideInit(wrapperEl.value, state, SlideType.VERTICAL)-->
+<!--  state.cs = props.list.slice(0, props.virtualTotal).map((v, i) => r(v, i))-->
+<!--})-->
+
+<!--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('&#45;&#45;')-->
+<!--      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>-->
+
+<!--
+测试用<component :is的方法是否可行。结论，可行。但是不实用。当list数据更新时，<component的表现形式为，不销毁组件，只更新props。
+
+感觉会导致已经加载到的video，重新加载。但未经测试
+-->
\ No newline at end of file
diff --git a/src/pages/test/Test.vue b/src/pages/test/Test.vue
index 5810f4b..6dbf740 100644
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@@ -1,10 +1,9 @@
 <template>
   <!--  <TestSlide></TestSlide>-->
   <!--  <SlideUser></SlideUser>-->
-<!--  <SlideImgs></SlideImgs>-->
-<!--  <TestSwiperJs></TestSwiperJs>-->
-<!--      <slideHooks></slideHooks>-->
-  <slideComponent></slideComponent>
+  <!--  <SlideImgs></SlideImgs>-->
+  <!--  <TestSwiperJs></TestSwiperJs>-->
+  <slideHooks></slideHooks>
 
   <!--  <div class="body">-->
   <!--    <div class="wrapper">-->
@@ -20,7 +19,6 @@ 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";
 
@@ -33,7 +31,6 @@ export default {
     SlideImgs,
     TestImg,
     TestSwiperJs,
-    slideComponent
   },
   data() {
     return {