优化分享

src/components/Video.vue

@@ -417,6 +417,7 @@ export default {
     margin: auto;
     left: 0;
     top: 0;
+    top: 0;
     bottom: 0;
     right: 0;
     animation: pause-animation 1.1s linear;

src/pages/home/Index2.vue

@@ -97,7 +97,6 @@
                 :list="videos"
                 :renderSlide="render"
                 v-model:active-index="videoActiveIndex"
-                v-model:active-index1="videoActiveIndex"
                 @end="end"
             >
             </SlideColumnVirtualList>

src/pages/test/TestSlide.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="TestSlide">
+  </div>
+</template>
+<script lang="jsx">
+import Slide from "./slide";
+import Video from "../../components/Video";
+
+export default {
+  name: "TestSlide",
+  components: {},
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      totalSize: 52,
+      pageSize: 10,
+      pageNo: 0,
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+    let slide = new Slide('#TestSlide', {
+      render: (item, itemIndex, play) => {
+        return (
+            <Video
+                isPlay={play}
+                video={item}
+                index={itemIndex}
+                onShowComments={e => this.isCommenting = true}
+                onShowShare={e => this.isSharing = true}
+                onGoUserInfo={e => this.baseActiveIndex = 1}
+                onGoMusic={e => this.$nav('/home/music')}
+                v-model={[this.videos[itemIndex], 'video']}
+            />
+        )
+      },
+      request: this.$api.videos.recommended
+    })
+  },
+  methods: {
+    async getData() {
+      this.loading = true
+      let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
+      console.log(res)
+      this.loading = false
+      if (res.code === this.SUCCESS) {
+        this.totalSize = res.data.total
+        this.videos = this.videos.concat(res.data.list)
+        // this.videos = this.$clone(this.localVideos)
+      } else {
+        this.pageNo--
+      }
+    },
+  }
+}
+</script>
+<style>
+
+.slide-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.slide-list {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.slide-item {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+</style>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+#TestSlide {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+  }
+}
+</style>

src/pages/test/slide.js

@@ -0,0 +1,56 @@
+import Dom from "../../utils/dom";
+import * as Vue from "vue";
+
+export default class Slide {
+  constructor(id, config) {
+    let container = new Dom(id)
+    this.wrapper = new Dom().create('<div class="slide-wrapper"></div>')
+    this.list = new Dom().create('<div class="slide-list"></div>')
+    this.list.on('touchstart', () => {
+      console.log('touchstart')
+    })
+    this.list.on('touchmove', () => {
+      console.log('touchmove')
+    })
+    this.list.on('touchend', () => {
+      console.log('touchend')
+    })
+    this.wrapper.append(this.list)
+    container.append(this.wrapper)
+    this.totalSize = 52
+    this.pageSize = 10
+    this.pageNo = 0
+    this.config = config
+    this.appInsMap = new Map()
+    this.getData()
+  }
+
+  async getData() {
+    if (this.config.request) {
+      let res = await this.config.request({pageNo: this.pageNo, pageSize: this.pageSize})
+      if (res.code === 200) {
+        res.data.list.map((v, i) => {
+          let el = this.getInsEl(v, i, false)
+          let item = new Dom().create('<div class="slide-item"></div>')
+          item.append(new Dom(el))
+          this.list.append(item)
+        })
+      }
+    }
+  }
+
+  getInsEl(item, index, play = false) {
+    // console.log('index',index,play)
+    let slideVNode = this.config.render(item, index, play)
+    const app = Vue.createApp({
+      render() {
+        return slideVNode
+      }
+    })
+    const parent = document.createElement('div')
+    const ins = app.mount(parent)
+    this.appInsMap.set(index, app)
+    // this.appInsMap.set(index, ins)
+    return ins.$el
+  }
+}

src/router/routes.js

@@ -71,6 +71,7 @@ import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
 import Uploader from "../pages/me/Uploader";
+import TestSlide from "../pages/test/TestSlide";
 
 const routes = [
   // {path: '', component: Music},
@@ -81,6 +82,7 @@ const routes = [
   {path: '/test3', component: Test3},
   {path: '/test4', component: Test4},
   {path: '/test5', component: Test5},
+  {path: '/TestSlide', component: TestSlide},
   {path: '/TestVue3', component: TestVue3},
   {path: '/TestKeepAlive', component: TestKeepAlive},
   {path: '/TestKeepAlivePage1', component: TestKeepAlivePage1},