save

package.json

@@ -16,6 +16,7 @@
     "mitt": "3.0.0",
     "mockjs": "1.1.0",
     "pinyin": "2.11.1",
+    "swiper": "^8.4.6",
     "vconsole": "^3.15.0",
     "vue": "3.2.45",
     "vue-router": "4.0.14",

pnpm-lock.yaml

@@ -14,6 +14,7 @@ specifiers:
   mobile-select: 1.1.2
   mockjs: 1.1.0
   pinyin: 2.11.1
+  swiper: ^8.4.6
   vconsole: ^3.15.0
   vite: 4.0.4
   vue: 3.2.45
@@ -31,6 +32,7 @@ dependencies:
   mitt: 3.0.0
   mockjs: 1.1.0
   pinyin: 2.11.1
+  swiper: 8.4.6
   vconsole: 3.15.0
   vue: 3.2.45
   vue-router: 4.0.14_vue@3.2.45
@@ -950,6 +952,12 @@ packages:
     dev: false
     optional: true
 
+  /dom7/4.0.4:
+    resolution: {integrity: sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==}
+    dependencies:
+      ssr-window: 4.0.2
+    dev: false
+
   /electron-to-chromium/1.4.284:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
     dev: true
@@ -1557,6 +1565,10 @@ packages:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
 
+  /ssr-window/4.0.2:
+    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
+    dev: false
+
   /string-width/4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -1598,6 +1610,15 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: true
 
+  /swiper/8.4.6:
+    resolution: {integrity: sha512-HACW035vBz2T6Kfut23EAzXhcDpgR8doX+wjq0ZUvJgS5SQApGrV885DAPLBFnmPUISsAhNSVxPKDxqroFvXvQ==}
+    engines: {node: '>= 4.7.0'}
+    requiresBuild: true
+    dependencies:
+      dom7: 4.0.4
+      ssr-window: 4.0.2
+    dev: false
+
   /tar/6.1.13:
     resolution: {integrity: sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==}
     engines: {node: '>=10'}

src/components/slide/BVideo.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="video-wrapper" ref="videoWrapper" :class="name">
+  <div class="video-wrapper" ref="videoWrapper" :class="positionName">
     <Loading v-if="loading" style="position: absolute"/>
     <!--    <video :src="video.video + '?v=123'"-->
-    <video :src="video.video"
-           :poster="video.video + videoPoster"
+    <video :src="item.video"
+           :poster="item.video + videoPoster"
            ref="video"
            muted
            preload
@@ -13,15 +13,13 @@
     <img src="../../assets/img/icon/play-white.png" class="pause" v-if="paused">
     <div class="float" :style="{opacity: isUp?0:1}">
       <div :style="{opacity:isMove ? 0:1}" class="normal">
-        <ItemToolbar :item="video"
-                     :index="0"
-                     prefix="sadfa"
+        <ItemToolbar v-model:item="localItem"
+                     :index="index"
+                     :position="position"
         />
         <ItemDesc
-            :item="video"
-            :index="0"
-            prefix="sadfa"
-
+            v-model:item="localItem"
+            :index="index"
         />
         <div v-if="isMy" class="comment-status">
           <div class="comment">
@@ -79,7 +77,7 @@ export default {
     ItemDesc
   },
   props: {
-    video: {
+    item: {
       type: Object,
       default: () => {
         return {}
@@ -91,10 +89,10 @@ export default {
         return -1
       }
     },
-    tag: {
-      type: String,
+    position: {
+      type: Object,
       default: () => {
-        return ''
+        return {}
       }
     },
     //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
@@ -119,7 +117,7 @@ export default {
   },
   computed: {
     durationStyle() {
-      return {width: this.pageX + 'px'}
+      return {width: this.playX + 'px'}
     },
     progressClass() {
       if (this.isMove) {
@@ -128,16 +126,18 @@ export default {
         return this.isPlaying ? '' : 'stop'
       }
     },
+    positionName() {
+      return 'item-' + Object.values(this.position).join('-')
+    }
   },
   data() {
     return {
       loading: false,
       paused: false,
-      name: `v-${this.tag}-item`,
       duration: 0,
       step: 0,
       currentTime: -1,
-      pageX: 0,
+      playX: 0,
       start: {x: 0},
       last: {x: 0, time: 0},
       height: 0,
@@ -147,31 +147,29 @@ export default {
       isMove: false,
       isSingleClick: false,
       test: [1, 2],
-      lVideo: this.video,
+      localItem: this.item,
       progressBarRect: {},
-
       videoScreenHeight: 0,
       videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`
     }
   },
   mounted() {
+    console.log('position',this.position)
+    console.log('item',this.item)
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth
     let video = this.$refs.video
     video.currentTime = 0
     let fun = e => {
       this.currentTime = Math.ceil(e.target.currentTime)
-      this.pageX = (this.currentTime - 1) * this.step
+      this.playX = (this.currentTime - 1) * this.step
     }
     video.addEventListener('loadedmetadata', e => {
       this.videoScreenHeight = video.videoHeight / (video.videoWidth / this.width)
       this.duration = video.duration
-      // if (this.duration > 60) {
-      if (this.duration > 6) {
-        this.progressBarRect = this.$refs.progress.getBoundingClientRect()
-        this.step = this.progressBarRect.width / Math.floor(this.duration)
-        video.addEventListener('timeupdate', fun)
-      }
+      this.progressBarRect = this.$refs.progress.getBoundingClientRect()
+      this.step = this.progressBarRect.width / Math.floor(this.duration)
+      video.addEventListener('timeupdate', fun)
     })
 
     let eventTester = (e, t) => {
@@ -230,8 +228,8 @@ export default {
   },
   methods: {
     play() {
-      new Dom(`.${this.name}-marquee`).trigger('start')
-      new Dom(`.${this.name}-music`).trigger('start')
+      new Dom(`.${this.tag}-marquee`).trigger('start')
+      new Dom(`.${this.tag}-music`).trigger('start')
       // console.log('trigger-play')
       this.isPlaying = true
       this.paused = false
@@ -242,8 +240,8 @@ export default {
       this.$refs.video.play()
     },
     stop() {
-      new Dom(`.${this.name}-marquee`).trigger('stop')
-      new Dom(`.${this.name}-music`).trigger('stop')
+      new Dom(`.${this.tag}-marquee`).trigger('stop')
+      new Dom(`.${this.tag}-music`).trigger('stop')
       // console.log('trigger-stop')
       this.$refs.video.pause()
       this.paused = false
@@ -251,8 +249,8 @@ export default {
       this.$refs.video.currentTime = 0
     },
     pause() {
-      new Dom(`.${this.name}-marquee`).trigger('pause')
-      new Dom(`.${this.name}-music`).trigger('pause')
+      new Dom(`.${this.tag}-marquee`).trigger('pause')
+      new Dom(`.${this.tag}-music`).trigger('pause')
       // console.log('trigger-pause')
       this.$refs.video.pause()
       this.paused = true
@@ -271,35 +269,29 @@ export default {
         this.isAttention = true
       }, 1000)
     },
-    loved(e, index) {
-      this.lVideo.isLoved = !this.lVideo.isLoved
-      this.$emit('update:video', this.lVideo)
-    },
     touchstart(e) {
+      Utils.$stopPropagation(e)
       this.start.x = e.touches[0].pageX
-      this.last.x = this.pageX
+      this.last.x = this.playX
       this.last.time = this.currentTime
     },
     touchmove(e) {
       // console.log('move',e)
-      // if (this.isPlaying) return
+      Utils.$stopPropagation(e)
       this.isMove = true
       this.pause()
       let dx = e.touches[0].pageX - this.start.x
-      this.pageX = this.last.x + dx
+      this.playX = this.last.x + dx
       this.currentTime = this.last.time + Math.ceil(Math.ceil(dx) / this.step)
       if (this.currentTime <= 0) this.currentTime = 0
       if (this.currentTime >= this.duration) this.currentTime = this.duration
-      Utils.$stopPropagation(e)
     },
     touchend(e) {
-      if (this.isPlaying) return
       // console.log('end', e)
-      setTimeout(() => {
-        this.isMove = false
-      }, 1000)
-      this.play()
       Utils.$stopPropagation(e)
+      if (this.isPlaying) return
+      setTimeout(() => this.isMove = false, 1000)
+      this.play()
     }
   }
 }

src/components/slide/ItemDesc.vue

@@ -3,7 +3,7 @@
 import {reactive} from "vue";
 import BaseMarquee from "../BaseMarquee";
 
-const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
+const {item, index, isMy, isUp, isPlay} = defineProps({
   item: {
     type: Object,
     default: () => {
@@ -16,12 +16,6 @@ const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
       return -1
     }
   },
-  prefix: {
-    type: String,
-    default: () => {
-      return ''
-    }
-  },
   isMy: {
     type: Boolean,
     default: () => {
@@ -45,7 +39,6 @@ const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
 
 const state = reactive({
   isAttention: false,
-  name: `v-${prefix}-${index}-video`,
   test: [1, 2],
 })
 

src/components/slide/ItemToolbar.vue

@@ -2,8 +2,10 @@
 import BaseMusic from "../BaseMusic";
 import Utils from "../../utils";
 import {reactive} from "vue";
+import bus from "../../utils/bus";
+import {cloneDeep} from "lodash";
 
-const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
+const {item, index, isMy, isUp, isPlay, position} = defineProps({
   item: {
     type: Object,
     default: () => {
@@ -16,10 +18,10 @@ const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
       return -1
     }
   },
-  prefix: {
-    type: String,
+  position: {
+    type: Object,
     default: () => {
-      return ''
+      return {}
     }
   },
   isMy: {
@@ -42,15 +44,16 @@ const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
     }
   },
 })
-
+const emit = defineEmits(['update:item'])
 const state = reactive({
   isAttention: false,
-  name: `v-${prefix}-${index}-video`,
 })
 
 function loved(e, index) {
-  // this.lVideo.isLoved = !this.lVideo.isLoved
-  // this.$emit('update:video', this.lVideo)
+  let old = cloneDeep(item)
+  old.isLoved = !old.isLoved
+  emit('update:item', old)
+  // bus.emit('update:item', {position, item: old})
 }
 
 function attention() {

src/pages/me/Uploader.vue

@@ -356,7 +356,7 @@ export default {
           childs: -1
         },
         collect: {
-          video: {
+          item: {
             list: [],
             childs: -1,
           },

src/pages/slideHooks/VInfinite.vue

@@ -12,10 +12,10 @@ const props = defineProps({
       return 0
     }
   },
-  tag: {
-    type: String,
+  position: {
+    type: Object,
     default: () => {
-      return ''
+      return {}
     }
   },
   render: {
@@ -39,6 +39,7 @@ const emit = defineEmits(['update:index'])
 
 const appInsMap = new Map()
 const judgeValue = 20
+const slideItemClassName = 'slide-item2'
 const wrapperEl = ref(null)
 const state = reactive({
   name: 'SlideVerticalInfinite',
@@ -69,7 +70,6 @@ onMounted(() => {
 //默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新
 function insertContent(list = props.list) {
   let start = 0
-  let that = this
 
   if (state.localIndex >= (props.virtualTotal - 1) / 2) {
     start = state.localIndex - (props.virtualTotal - 1) / 2
@@ -80,8 +80,8 @@ function insertContent(list = props.list) {
     start = end - 5
   }
   if (start < 0) start = 0
-  // console.log('start', start)
-  // console.log('end', end)
+  console.log('start', start)
+  console.log('end', end)
   list.slice(start, end).map(
       (item, index) => {
         //自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
@@ -93,7 +93,7 @@ function insertContent(list = props.list) {
              ${-state.localIndex * state.wrapper.height}px,  0px)`)
 
   if (state.localIndex > 2 && list.length > 5) {
-    $(wrapperEl.value).find(".slide-item").each(function () {
+    $(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
       if ((list.length - state.localIndex) > 2) {
         $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
       } else {
@@ -106,10 +106,10 @@ function insertContent(list = props.list) {
 
 function getInsEl(item, index, play = false) {
   // console.log('index',index,play)
-  let slideVNode = props.render(item, index, play, props.tag)
+  let slideVNode = props.render(item, index, play, props.position)
   const app = createApp({
     render() {
-      return <SlideItem>{slideVNode}</SlideItem>
+      return <SlideItem data-index={index}>{slideVNode}</SlideItem>
     }
   })
   const parent = document.createElement('div')
@@ -129,8 +129,58 @@ function touchMove(e) {
 }
 
 function touchEnd(e) {
-  slideTouchEnd(e, state, canNext, () => {
+  slideTouchEnd(e, state, canNext, (isNext) => {
+    if (isNext) {
+      let addItemIndex = state.localIndex + 2
+      let res = $(wrapperEl.value).find(`.${slideItemClassName}[data-index=${addItemIndex}]`)
+      if (state.wrapper.childrenLength < props.virtualTotal) {
+        if (res.length === 0) {
+          wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
+        }
+      }
+      if (state.wrapper.childrenLength === props.virtualTotal
+          && state.localIndex >= (props.virtualTotal + 1) / 2
+          && state.localIndex <= props.list.length - 3
+      ) {
+        if (res.length === 0) {
+          wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
+          appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:first`).data('index')).unmount()
+          // $(wrapperEl.value).find(".base-slide-item:first").remove()
+          $(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
+            $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
+          })
+        }
+      }
+      if (state.wrapper.childrenLength > props.virtualTotal) {
+        $(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
+          let index = $(this).data('index')
+          if (index < (state.localIndex - 2)) {
+            appInsMap.get(index).unmount()
+          }
+          $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
+        })
+      }
+    } else {
+      let addItemIndex = state.localIndex - 2
+      let res = $(wrapperEl.value).find(`.${slideItemClassName}[data-index=${addItemIndex}]`)
+
+      if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
+        if (res.length === 0) {
+          wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
+          appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:last`).data('index')).unmount()
+          // $(wrapperEl.value).find(".base-slide-item:last").remove()
+          $(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
+            $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
+          })
+        }
+      }
+
+      if (state.wrapper.childrenLength > props.virtualTotal) {
+        appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:last`).data('index')).unmount()
+      }
+    }
 
+    state.wrapper.childrenLength = wrapperEl.value.children.length
   }, null, SlideType.VERTICAL)
   slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
 }

src/pages/slideHooks/common.js

@@ -36,7 +36,7 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
   return state.next
 }
 
-export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL,notNextCb) {
+export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL, notNextCb) {
   state.move.x = e.touches[0].pageX - state.start.x
   state.move.y = e.touches[0].pageY - state.start.y
 
@@ -58,7 +58,7 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
     }
     Utils.$setCss(el, 'transition-duration', `0ms`)
     Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
-  }else {
+  } else {
     notNextCb?.()
   }
 }
@@ -82,7 +82,10 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = Sli
       } else {
         state.localIndex--
       }
-      return nextCb?.()
+
+
+
+      return nextCb?.(isNext)
     }
   }
   notNextCb?.()

src/pages/slideHooks/index.vue

@@ -23,7 +23,10 @@
                 v-model:index="state.itemIndex"
                 :render="render"
                 :list="state.recommendVideos"
-                tag="0-5"
+                :position="{
+                  baseIndex:0,
+                  navIndex:5,
+                }"
             >
             </VInfinite>
           </SlideItem>
@@ -58,7 +61,7 @@ import SlideImgs from "../../components/slide/SlideAlbum";
 import BVideo from "../../components/slide/BVideo";
 
 import resource from "../../assets/data/resource.js";
-import {onMounted, reactive} from "vue";
+import {onMounted, onUnmounted, reactive} from "vue";
 import enums from "../../utils/enums";
 import bus from "../../utils/bus";
 import Dom from "../../utils/dom";
@@ -162,6 +165,436 @@ const state = reactive({
         "is_private": 0
       }
     },
+    {
+      type: 'recommend-video',
+      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+      video: 'http://douyin.ttentau.top/0.mp4',
+      "video_data_size": 26829508,
+      "duration": 427780,
+      "desc": "我不管我们宿舍第一好看",
+      "allow_download": 0,
+      "allow_duet": 0,
+      "allow_react": 0,
+      "allow_music": 1,
+      "allow_douplus": 1,
+      "allow_share": 1,
+      "digg_count": 10480000,
+      "comment_count": 79000,
+      "download_count": 6,
+      "play_count": 0,
+      "share_count": 119000,
+      "forward_count": 0,
+      "collect_count": 3,
+      "sort": 195,
+      "is_top": 0,
+      "city": "北京",
+      address: '中央戏剧学院',
+      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+      "create_time": "1630423555",
+      "creator_id": "93864497380",
+      "status": 1,
+      "topics": [
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "敬礼变装",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        },
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "宿舍",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        }
+      ],
+      "music": {
+        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+        "title": "@穷电影创作的原声-小高快起来跳舞",
+        "creator_id": "93864497380",
+        "create_time": "1630423555",
+        "status": 1
+      },
+      "author": {
+        "id": "1",
+        "unique_id_modify_time": "1630393144",
+        "unique_id": "10040050",
+        "favoriting_count": 143,
+        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
+        school: {
+          name: '中央戏剧学院',
+          department: null,
+          joinTime: null,
+          education: null,
+          displayType: enums.DISPLAY_TYPE.ALL,
+        },
+        "city": "",
+        "province": '北京',
+        "country": "",
+        "location": "",
+        "birthday": "2002-01-01",
+        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+        "following_count": 66,
+        "follower_count": 235000,
+        "aweme_count": 1796000,
+        "nickname": "我是小睿耶",
+        certification: '',
+        "phone": "",
+        "sex": "",
+        "last_login_time": "1630423555",
+        "create_time": "1630423555",
+        "status": 1,
+        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
+        "is_private": 0
+      }
+    },
+    {
+      type: 'recommend-video',
+      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+      video: 'http://douyin.ttentau.top/0.mp4',
+      "video_data_size": 26829508,
+      "duration": 427780,
+      "desc": "我不管我们宿舍第一好看",
+      "allow_download": 0,
+      "allow_duet": 0,
+      "allow_react": 0,
+      "allow_music": 1,
+      "allow_douplus": 1,
+      "allow_share": 1,
+      "digg_count": 10480000,
+      "comment_count": 79000,
+      "download_count": 6,
+      "play_count": 0,
+      "share_count": 119000,
+      "forward_count": 0,
+      "collect_count": 3,
+      "sort": 195,
+      "is_top": 0,
+      "city": "北京",
+      address: '中央戏剧学院',
+      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+      "create_time": "1630423555",
+      "creator_id": "93864497380",
+      "status": 1,
+      "topics": [
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "敬礼变装",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        },
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "宿舍",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        }
+      ],
+      "music": {
+        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+        "title": "@穷电影创作的原声-小高快起来跳舞",
+        "creator_id": "93864497380",
+        "create_time": "1630423555",
+        "status": 1
+      },
+      "author": {
+        "id": "1",
+        "unique_id_modify_time": "1630393144",
+        "unique_id": "10040050",
+        "favoriting_count": 143,
+        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
+        school: {
+          name: '中央戏剧学院',
+          department: null,
+          joinTime: null,
+          education: null,
+          displayType: enums.DISPLAY_TYPE.ALL,
+        },
+        "city": "",
+        "province": '北京',
+        "country": "",
+        "location": "",
+        "birthday": "2002-01-01",
+        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+        "following_count": 66,
+        "follower_count": 235000,
+        "aweme_count": 1796000,
+        "nickname": "我是小睿耶",
+        certification: '',
+        "phone": "",
+        "sex": "",
+        "last_login_time": "1630423555",
+        "create_time": "1630423555",
+        "status": 1,
+        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
+        "is_private": 0
+      }
+    },
+    {
+      type: 'recommend-video',
+      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+      video: 'http://douyin.ttentau.top/0.mp4',
+      "video_data_size": 26829508,
+      "duration": 427780,
+      "desc": "我不管我们宿舍第一好看",
+      "allow_download": 0,
+      "allow_duet": 0,
+      "allow_react": 0,
+      "allow_music": 1,
+      "allow_douplus": 1,
+      "allow_share": 1,
+      "digg_count": 10480000,
+      "comment_count": 79000,
+      "download_count": 6,
+      "play_count": 0,
+      "share_count": 119000,
+      "forward_count": 0,
+      "collect_count": 3,
+      "sort": 195,
+      "is_top": 0,
+      "city": "北京",
+      address: '中央戏剧学院',
+      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+      "create_time": "1630423555",
+      "creator_id": "93864497380",
+      "status": 1,
+      "topics": [
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "敬礼变装",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        },
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "宿舍",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        }
+      ],
+      "music": {
+        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+        "title": "@穷电影创作的原声-小高快起来跳舞",
+        "creator_id": "93864497380",
+        "create_time": "1630423555",
+        "status": 1
+      },
+      "author": {
+        "id": "1",
+        "unique_id_modify_time": "1630393144",
+        "unique_id": "10040050",
+        "favoriting_count": 143,
+        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
+        school: {
+          name: '中央戏剧学院',
+          department: null,
+          joinTime: null,
+          education: null,
+          displayType: enums.DISPLAY_TYPE.ALL,
+        },
+        "city": "",
+        "province": '北京',
+        "country": "",
+        "location": "",
+        "birthday": "2002-01-01",
+        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+        "following_count": 66,
+        "follower_count": 235000,
+        "aweme_count": 1796000,
+        "nickname": "我是小睿耶",
+        certification: '',
+        "phone": "",
+        "sex": "",
+        "last_login_time": "1630423555",
+        "create_time": "1630423555",
+        "status": 1,
+        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
+        "is_private": 0
+      }
+    },
+    {
+      type: 'recommend-video',
+      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+      video: 'http://douyin.ttentau.top/0.mp4',
+      "video_data_size": 26829508,
+      "duration": 427780,
+      "desc": "我不管我们宿舍第一好看",
+      "allow_download": 0,
+      "allow_duet": 0,
+      "allow_react": 0,
+      "allow_music": 1,
+      "allow_douplus": 1,
+      "allow_share": 1,
+      "digg_count": 10480000,
+      "comment_count": 79000,
+      "download_count": 6,
+      "play_count": 0,
+      "share_count": 119000,
+      "forward_count": 0,
+      "collect_count": 3,
+      "sort": 195,
+      "is_top": 0,
+      "city": "北京",
+      address: '中央戏剧学院',
+      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+      "create_time": "1630423555",
+      "creator_id": "93864497380",
+      "status": 1,
+      "topics": [
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "敬礼变装",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        },
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "宿舍",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        }
+      ],
+      "music": {
+        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+        "title": "@穷电影创作的原声-小高快起来跳舞",
+        "creator_id": "93864497380",
+        "create_time": "1630423555",
+        "status": 1
+      },
+      "author": {
+        "id": "1",
+        "unique_id_modify_time": "1630393144",
+        "unique_id": "10040050",
+        "favoriting_count": 143,
+        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
+        school: {
+          name: '中央戏剧学院',
+          department: null,
+          joinTime: null,
+          education: null,
+          displayType: enums.DISPLAY_TYPE.ALL,
+        },
+        "city": "",
+        "province": '北京',
+        "country": "",
+        "location": "",
+        "birthday": "2002-01-01",
+        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+        "following_count": 66,
+        "follower_count": 235000,
+        "aweme_count": 1796000,
+        "nickname": "我是小睿耶",
+        certification: '',
+        "phone": "",
+        "sex": "",
+        "last_login_time": "1630423555",
+        "create_time": "1630423555",
+        "status": 1,
+        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
+        "is_private": 0
+      }
+    },
+    {
+      type: 'recommend-video',
+      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+      video: 'http://douyin.ttentau.top/0.mp4',
+      "video_data_size": 26829508,
+      "duration": 427780,
+      "desc": "我不管我们宿舍第一好看",
+      "allow_download": 0,
+      "allow_duet": 0,
+      "allow_react": 0,
+      "allow_music": 1,
+      "allow_douplus": 1,
+      "allow_share": 1,
+      "digg_count": 10480000,
+      "comment_count": 79000,
+      "download_count": 6,
+      "play_count": 0,
+      "share_count": 119000,
+      "forward_count": 0,
+      "collect_count": 3,
+      "sort": 195,
+      "is_top": 0,
+      "city": "北京",
+      address: '中央戏剧学院',
+      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+      "create_time": "1630423555",
+      "creator_id": "93864497380",
+      "status": 1,
+      "topics": [
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "敬礼变装",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        },
+        {
+          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+          "name": "宿舍",
+          "creator_id": "93864497380",
+          "create_time": "1630423555",
+          "status": 1
+        }
+      ],
+      "music": {
+        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+        "title": "@穷电影创作的原声-小高快起来跳舞",
+        "creator_id": "93864497380",
+        "create_time": "1630423555",
+        "status": 1
+      },
+      "author": {
+        "id": "1",
+        "unique_id_modify_time": "1630393144",
+        "unique_id": "10040050",
+        "favoriting_count": 143,
+        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
+        school: {
+          name: '中央戏剧学院',
+          department: null,
+          joinTime: null,
+          education: null,
+          displayType: enums.DISPLAY_TYPE.ALL,
+        },
+        "city": "",
+        "province": '北京',
+        "country": "",
+        "location": "",
+        "birthday": "2002-01-01",
+        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+        "following_count": 66,
+        "follower_count": 235000,
+        "aweme_count": 1796000,
+        "nickname": "我是小睿耶",
+        certification: '',
+        "phone": "",
+        "sex": "",
+        "last_login_time": "1630423555",
+        "create_time": "1630423555",
+        "status": 1,
+        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
+        "is_private": 0
+      }
+    },
   ],
 
   isCommenting: false,
@@ -186,9 +619,19 @@ onMounted(() => {
   bus.on('singleClick', () => {
     new Dom(`.v-${state.baseIndex}-${state.navIndex}-${state.itemIndex}-item`).trigger('singleClick')
   })
+  bus.on('update:item', val => {
+    console.log('val', val)
+    const {baseIndex, navIndex, itemIndex} = val.position
+    if (navIndex === 5) {
+      // state.recommendVideos[itemIndex] = val.item
+    }
+  })
+})
+onUnmounted(() => {
+  bus.offAll()
 })
 
-function render(item, itemIndex, play, tag) {
+function render(item, itemIndex, play, position) {
   let node
   if (item.type === 'img') {
     node = <img src={item.src} style="height:100%;"/>
@@ -199,8 +642,8 @@ function render(item, itemIndex, play, tag) {
   if (item.type === 'recommend-video') {
     node = <BVideo
         isPlay={play}
-        video={item}
-        tag={tag + '-' + itemIndex}
+        item={item}
+        position={{...position, itemIndex}}
         onShowComments={e => state.isCommenting = true}
         onShowShare={e => state.isSharing = true}
         onGoUserInfo={e => state.baseActiveIndex = 1}

src/pages/test/Test.vue

@@ -3,6 +3,7 @@
   <!--  <SlideUser></SlideUser>-->
 <!--  <SlideImgs></SlideImgs>-->
     <slideHooks></slideHooks>
+<!--  <TestSwiperJs></TestSwiperJs>-->
 
   <!--  <div class="body">-->
   <!--    <div class="wrapper">-->
@@ -18,6 +19,7 @@ import SlideUser from "../../components/slide/SlideUser";
 import SlideImgs from "../../components/slide/SlideAlbum";
 import TestImg from "./TestImg";
 import slideHooks from '../slideHooks'
+import TestSwiperJs from "./TestSwiperJs";
 import {mat4} from "gl-matrix";
 
 export default {
@@ -27,7 +29,8 @@ export default {
     TestSlide,
     SlideUser,
     SlideImgs,
-    TestImg
+    TestImg,
+    TestSwiperJs
   },
   data() {
     return {

src/pages/test/TestSwiperJs.vue

@@ -0,0 +1,55 @@
+<template>
+  <swiper :modules="[Virtual]" :space-between="50" virtual>
+    <swiper-slide
+        v-for="(slideContent, index) in slides"
+        :key="index"
+        :virtualIndex="index"
+    >
+      <div class="aa">{{ slideContent }}</div>
+    </swiper-slide
+    >
+  </swiper>
+</template>
+<script>
+import {Virtual} from 'swiper';
+import {Swiper, SwiperSlide} from 'swiper/vue';
+import SlideItem from "../slideHooks/SlideItem";
+import "swiper/css";
+import "swiper/css/virtual";
+
+
+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,
+    };
+  },
+};
+</script>
+<style lang="less">
+.swiper {
+  height: 50vh;
+  //width: 100%;
+  color: white;
+  font-size: 14rem;
+
+  .swiper-slide {
+    width: 100vw;
+  }
+
+  .aa {
+    height: 50vh;
+    width: 100vw;
+  }
+}
+</style>

src/utils/bus.js

@@ -9,10 +9,20 @@ export default {
     }
     this.eventMap.set(eventType, cbs)
   },
+  off(eventType) {
+    let cbs = this.eventMap.has(eventType);
+    if (cbs) {
+      this.eventMap.delete(eventType);
+    }
+  },
+  offAll() {
+    this.eventMap = new Map()
+  },
   emit(eventType, val) {
     let cbs = this.eventMap.get(eventType)
     if (cbs) {
       cbs.map(cb => cb(val))
     }
   }
-}
+}
+