diff --git a/src/assets/img/icon/components/video/d5i.webp b/src/assets/img/icon/components/video/d5i.webp
deleted file mode 100644
index c2019c7..0000000
Binary files a/src/assets/img/icon/components/video/d5i.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/fol.webp b/src/assets/img/icon/components/video/fol.webp
deleted file mode 100644
index 0a31a07..0000000
Binary files a/src/assets/img/icon/components/video/fol.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/foq.webp b/src/assets/img/icon/components/video/foq.webp
deleted file mode 100644
index a31ed9f..0000000
Binary files a/src/assets/img/icon/components/video/foq.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/for.webp b/src/assets/img/icon/components/video/for.webp
deleted file mode 100644
index 0e78ddc..0000000
Binary files a/src/assets/img/icon/components/video/for.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/gx-.webp b/src/assets/img/icon/components/video/gx-.webp
deleted file mode 100644
index 21583c6..0000000
Binary files a/src/assets/img/icon/components/video/gx-.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/gx5.webp b/src/assets/img/icon/components/video/gx5.webp
deleted file mode 100644
index a930243..0000000
Binary files a/src/assets/img/icon/components/video/gx5.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/gxj.webp b/src/assets/img/icon/components/video/gxj.webp
deleted file mode 100644
index 0145637..0000000
Binary files a/src/assets/img/icon/components/video/gxj.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/gyq.webp b/src/assets/img/icon/components/video/gyq.webp
deleted file mode 100644
index 5ee14ee..0000000
Binary files a/src/assets/img/icon/components/video/gyq.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/hq0.webp b/src/assets/img/icon/components/video/hq0.webp
deleted file mode 100644
index dd4e0aa..0000000
Binary files a/src/assets/img/icon/components/video/hq0.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/hq1.webp b/src/assets/img/icon/components/video/hq1.webp
deleted file mode 100644
index 687074f..0000000
Binary files a/src/assets/img/icon/components/video/hq1.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/hq2.webp b/src/assets/img/icon/components/video/hq2.webp
deleted file mode 100644
index 3588dec..0000000
Binary files a/src/assets/img/icon/components/video/hq2.webp and /dev/null differ
diff --git a/src/assets/img/icon/components/video/hqy.webp b/src/assets/img/icon/components/video/hqy.webp
deleted file mode 100644
index 71e85ab..0000000
Binary files a/src/assets/img/icon/components/video/hqy.webp and /dev/null differ
diff --git a/src/assets/img/icon/举报.svg b/src/assets/img/icon/举报.svg
deleted file mode 100644
index e228111..0000000
--- a/src/assets/img/icon/举报.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702074319" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4164" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 358.555826c-12.288 0-22.26087 9.97287-22.26087 22.26087l0 268.221217c0 12.288 9.97287 22.26087 22.26087 22.26087s22.26087-9.97287 22.26087-22.26087L534.26087 380.816696C534.26087 368.528696 524.288 358.555826 512 358.555826zM512 716.176696c-12.288 0-22.26087 9.97287-22.26087 22.26087l0 44.699826c0 12.288 9.97287 22.26087 22.26087 22.26087s22.26087-9.97287 22.26087-22.26087l0-44.699826C534.26087 726.149565 524.288 716.176696 512 716.176696zM998.912 867.394783 575.688348 131.33913C559.972174 104.025043 536.754087 88.33113 512 88.33113S464.027826 104.025043 448.311652 131.33913L25.088 867.394783c-8.859826 15.426783-13.356522 30.675478-13.356522 45.345391 0 32.456348 23.908174 65.224348 77.312 65.224348l845.913043 0c53.381565 0 77.289739-32.768 77.312-65.224348C1012.268522 898.070261 1007.771826 882.821565 998.912 867.394783zM934.956522 933.420522 89.043478 933.420522c-9.861565 0-32.790261-2.025739-32.790261-20.702609 0-6.678261 2.56-14.669913 7.41287-23.129043L486.912 153.533217c15.137391-26.290087 35.06087-26.290087 50.198261 0l423.223652 736.033391c4.85287 8.45913 7.41287 16.450783 7.41287 23.129043C967.746783 931.394783 944.818087 933.420522 934.956522 933.420522z" p-id="4165"></path></svg>
\ No newline at end of file
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 3a63635..f38244a 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -15,72 +15,79 @@
           <span>更多</span>
         </div>
       </div>
+
       <div class="line"></div>
       <div class="shares pl1r pb2r">
-        <div class="share-to pr1r pl1r"
-             v-for="item in 5"
-        >
-          <img src="../assets/img/icon/friend_circle.svg" alt="">
+        <div class="share-to pr1r pl1r">
+          <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
+          <span>分享到日常</span>
+        </div>
+        <div class="share-to pr1r pl1r">
+          <img src="../assets/img/icon/components/video/towechat.webp" alt="">
           <span>朋友圈</span>
         </div>
         <div class="share-to pr1r pl1r">
-          <img src="../assets/img/icon/wechat.svg" alt="">
-          <span>微信</span>
+          <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
+          <span>微信好友</span>
         </div>
         <div class="share-to pr1r pl1r">
-          <img src="../assets/img/icon/sq-share-qqzone-01.svg">
+          <img src="../assets/img/icon/components/video/tozone.webp" alt="">
           <span>QQ空间</span>
         </div>
         <div class="share-to pr1r pl1r">
-          <img src="../assets/img/icon/QQ.svg">
-          <span>QQ</span>
+          <img src="../assets/img/icon/components/video/toqq.webp" alt="">
+          <span>QQ好友</span>
         </div>
         <div class="share-to pr1r pl1r">
-          <img src="../assets/img/icon/sina.svg">
+          <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
+          <span>今日头条</span>
+        </div>
+        <div class="share-to pr1r pl1r">
+          <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
           <span>微博</span>
         </div>
-        <div class="share-to pr1r pl1r">
-          <img src="../assets/img/icon/more.svg">
-          <span>更多</span>
-        </div>
       </div>
       <div class="toolbar pl1r pb2r">
         <div class="tool pr1r pl1r ">
-          <img src="../assets/img/icon/举报.svg" alt="">
+          <img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
+          <span>一起看视频</span>
+        </div>
+        <div class="tool pr1r pl1r ">
+          <img src="../assets/img/icon/components/video/warring.png" alt="">
           <span>举报</span>
         </div>
         <div class="tool pr1r pl1r ">
-          <img src="../assets/img/icon/download.svg" alt="">
+          <img src="../assets/img/icon/components/video/download.png" alt="">
           <span>保存本地</span>
         </div>
         <div class="tool pr1r pl1r ">
-          <img src="../assets/img/icon/collect.svg" alt="">
+          <img src="../assets/img/icon/components/video/star.png" alt="">
           <span>收藏</span>
         </div>
         <div class="tool pr1r pl1r ">
-          <img src="../assets/img/icon/qiangjing.svg" alt="">
-          <span>抢镜</span>
+          <img src="../assets/img/icon/components/video/comeonplay.webp" alt="">
+          <span>合拍</span>
         </div>
         <div class="tool pr1r pl1r">
-          <img src="../assets/img/icon/qr_code.svg" alt="">
-          <span>二维码</span>
-        </div>
-        <div class="tool pr1r pl1r">
-          <img src="../assets/img/icon/dongtaibizhi.svg" alt="">
+          <img src="../assets/img/icon/components/video/bizhi.webp" alt="">
           <span>动态壁纸</span>
         </div>
+        <div class="tool pr1r pl1r">
+          <img src="../assets/img/icon/components/video/dislike.png" alt="">
+          <span>不感兴趣</span>
+        </div>
+        <div class="tool pr1r pl1r">
+          <img src="../assets/img/icon/components/video/link.png" alt="">
+          <span>复制链接</span>
+        </div>
+        <div class="tool pr1r pl1r">
+          <img src="../assets/img/icon/components/video/qrcode.png" alt="">
+          <span>二维码</span>
+        </div>
         <div class="tool pr1r pl1r">
           <img src="../assets/img/icon/hepai.svg" alt="">
           <span>合拍</span>
         </div>
-        <div class="tool pr1r pl1r">
-          <img src="../assets/img/icon/dislike.svg" alt="">
-          <span>不感兴趣</span>
-        </div>
-        <div class="tool pr1r pl1r">
-          <img src="../assets/img/icon/href.svg" alt="">
-          <span>复制链接</span>
-        </div>
       </div>
     </div>
   </transition>
@@ -100,6 +107,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import "../assets/scss/index";
+
 .share {
   position: fixed;
   /*top: 200px;*/
@@ -158,17 +167,16 @@ export default {
     display: flex;
 
     .share-to {
-      width: 50px;
 
       img {
-        width: 30px;
-        height: 30px;
-        padding: 10px;
+        width: 5rem;
+        height: 5rem;
         border-radius: 50%;
-        background: #1ace04;
       }
 
       span {
+        color: @second-text-color;
+        font-size: 1rem;
         display: block;
         text-align: center;
       }
@@ -184,14 +192,16 @@ export default {
       float: left;
 
       img {
-        width: 30px;
-        height: 30px;
-        padding: 10px;
+        width: 3rem;
+        height: 3rem;
+        padding: 1rem;
         border-radius: 50%;
-        background: #eaeaea;
+        background: @second-btn-color;
       }
 
       span {
+        color: @second-text-color;
+        font-size: 1rem;
         display: block;
         text-align: center;
       }
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 73e36fb..ac6465a 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -5,7 +5,14 @@
 <!--</template>-->
 <template>
   <div class="bg-video" v-bind:style="{'height':height+'px'}">
-    <video :src="video.videoUrl" poster="../assets/img/poster/1.jpg" ref="video" muted :autoplay="play" loop>
+<!--    <video :src="video.videoUrl" poster="../assets/img/icon/components/video/loading.gif" ref="video" muted :autoplay="play" loop>-->
+<!--    poster="../assets/img/poster/1.jpg"-->
+
+    <video :src="video.videoUrl"
+           ref="video"
+           muted
+           preload
+           :autoplay="play" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
     <div class="float-container" v-if="true" @click.stop="togglePlayVideo">
@@ -172,13 +179,11 @@ export default {
       this.currentTime = Math.ceil(e.target.currentTime)
       this.pageX = this.currentTime * this.step
     }
-    video.addEventListener('timeupdate', fun)
     video.addEventListener('loadedmetadata', e => {
       this.duration = video.duration
       if (this.duration > 60) {
         this.step = this.width / Math.floor(this.duration)
-      } else {
-        video.removeEventListener('timeupdate', fun)
+        video.addEventListener('timeupdate', fun)
       }
     })
     video.addEventListener('play', e => {
diff --git a/src/components/slide/SlideColumnVirtualList.vue b/src/components/slide/SlideColumnVirtualList.vue
new file mode 100644
index 0000000..ede6fa2
--- /dev/null
+++ b/src/components/slide/SlideColumnVirtualList.vue
@@ -0,0 +1,308 @@
+<template>
+  <div id="base-slide-wrapper">
+    <div id="base-slide-list" ref="slideList"
+         :style="{'flex-direction':'column'}"
+         @touchstart="touchStart($event)"
+         @touchmove="touchMove($event)"
+         @touchend="touchEnd($event)">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import * as Vue from 'vue'
+
+export default {
+  name: "SlideColumnVirtualList",
+  props: {
+    renderSlide: {
+      type: Function,
+      default: () => {
+        return null
+      }
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    defaultVirtualItemTotal: {
+      type: Number,
+      default: () => 5
+    },
+    activeIndex: {
+      type: Number,
+      default: () => 0
+    },
+  },
+  data() {
+    return {
+      wrapperHeight: 0,
+
+      startLocationX: 0,
+      startLocationY: 0,
+
+      moveXDistance: 0,
+      moveYDistance: 0,
+
+      judgeValue: 10,
+      startTime: 0,
+
+      currentSlideItemIndex: 0,
+      isDrawDown: true,
+      isCanDownWiping: false,
+      isNeedCheck: true,
+
+      slideList: null,
+      slideItems: null,
+      slideItemsHeights: [],
+      appInsMap: new Map()
+    }
+  },
+  watch: {
+    watchList: {
+      handler(newVal, oldVal) {
+        let that = this
+        if (oldVal.length === 0) {
+          let startIndex = 0
+          if (this.currentSlideItemIndex >= this.defaultVirtualItemTotal) {
+            startIndex = this.currentSlideItemIndex - (this.defaultVirtualItemTotal - 1) / 2
+          }
+          this.list.slice(startIndex, startIndex + 5).map(
+              (item, index) => {
+                let el = null
+                //自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
+                if (startIndex + index === this.currentSlideItemIndex) {
+                  el = this.getInsEl(item, startIndex + index, true)
+                } else {
+                  el = this.getInsEl(item, startIndex + index)
+                }
+                this.slideList.appendChild(el)
+              })
+          if (that.currentSlideItemIndex > 2) {
+            this.$setCss(this.slideList, 'transform', `translate3d(0px,
+             ${-this.currentSlideItemIndex * this.wrapperHeight}px,  0px)`)
+            $(".video-slide-item").each(function () {
+              $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+            })
+          }
+          setTimeout(this.checkChildren, 100)
+        } else {
+          let endLength = oldVal.length + 3
+          newVal.slice(oldVal.length, endLength).map((item, index) => {
+            let el = this.getInsEl(item, oldVal.length + index)
+            //这里必须要设置个top值，不然会把前面的条目给覆盖掉
+            $(el).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+            this.slideList.appendChild(el)
+          })
+          this.checkChildren()
+        }
+      },
+      deep: true
+    }
+  },
+  computed: {
+    //包装下，不然后watch里面监听到的新值和旧值是一样的，麻了
+    watchList() {
+      return [...this.list]
+    },
+  },
+  mounted: async function () {
+    this.checkChildren()
+    this.currentSlideItemIndex = this.activeIndex
+    this.list.slice(this.currentSlideItemIndex, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
+      this.slideList.appendChild(this.getInsEl(item, index))
+    })
+    this.checkChildren()
+  },
+  methods: {
+    getInsEl(item, index, play = false) {
+      let slideVNode = this.renderSlide(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
+    },
+    checkChildren() {
+      this.slideList = this.$refs.slideList
+      this.slideItems = this.slideList.children
+      this.wrapperHeight = this.$getCss(this.slideList, 'height')
+    },
+    touchStart(e) {
+      this.$setCss(this.slideList, 'transition-duration', `0ms`)
+      this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
+      this.toolbarStyleTransitionDuration = 0
+      this.startLocationX = e.touches[0].pageX
+      this.startLocationY = e.touches[0].pageY
+      this.startTime = Date.now()
+
+      let that = this
+      let items = $(".video-slide-item")
+      if (items.length > this.defaultVirtualItemTotal) {
+        let middle = (this.defaultVirtualItemTotal - 1) / 2
+        let removeNum = 0
+        items.each(function (index) {
+          if ($(this).data('index') === that.currentSlideItemIndex) {
+            console.log('start-index', index)
+            if (index !== middle) {
+              removeNum = index - middle
+            }
+          }
+        })
+        items.each(function (index) {
+          $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+        })
+        for (let i = 0; i < removeNum; i++) {
+          $(items[i]).remove()
+        }
+      }
+    },
+    touchMove(e) {
+      this.moveXDistance = e.touches[0].pageX - this.startLocationX
+      this.moveYDistance = e.touches[0].pageY - this.startLocationY
+
+      this.isDrawDown = this.moveYDistance < 0
+
+      this.checkDirection()
+
+      //me页面，需要获取向下滑动的时候
+      if (!this.isDrawDown) {
+        this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
+      }
+
+      //todo 太卡了，后面考虑用原生js来写
+      // this.$attrs['onMove'] && this.$emit('move', {
+      //   x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
+      //   y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
+      // })
+
+      if (this.isCanDownWiping) {
+        if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return; //在第一个item，并且想往下划。
+        if (this.currentSlideItemIndex === this.list.length - 1 && this.isDrawDown) return
+        // console.log('this.isCanDownWiping')
+        this.$stopPropagation(e)
+        this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) +
+        this.moveYDistance +
+        (this.isDrawDown ? this.judgeValue : -this.judgeValue)
+        }px, 0px)`)
+      }
+    },
+    touchEnd(e) {
+      if (this.isCanDownWiping) {
+        if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
+        if (this.currentSlideItemIndex === this.list.length - 1 && this.isDrawDown) return this.$attrs['onEnd'] && this.$emit('end')
+
+        this.$stopPropagation(e)
+
+        this.$setCss(this.slideList, 'transition-duration', `300ms`)
+        let endTime = Date.now()
+        let gapTime = endTime - this.startTime
+
+        if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
+        if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100
+        if (gapTime < 150) {
+          if (this.isDrawDown) {
+            this.currentSlideItemIndex += 1
+          } else {
+            this.currentSlideItemIndex -= 1
+          }
+          // console.log(this.slideItems.length)
+          let that = this
+          if (this.isDrawDown) {
+            let addItemIndex = this.currentSlideItemIndex + 2
+            if (this.slideItems.length < this.defaultVirtualItemTotal) {
+              let res = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
+              if (res.length === 0) {
+                this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
+              }
+            }
+            if (this.slideItems.length === this.defaultVirtualItemTotal
+                && this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
+                && this.currentSlideItemIndex <= this.list.length - 3
+            ) {
+              let res = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
+              // console.log(videos)
+              if (res.length === 0) {
+                this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
+                this.appInsMap.get($("#base-slide-list .video-slide-item:first").data('index')).unmount()
+                // $("#base-slide-list .base-slide-item:first").remove()
+                $(".video-slide-item").each(function () {
+                  $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+                })
+              }
+            }
+            if (this.slideItems.length > this.defaultVirtualItemTotal) {
+              this.appInsMap.get($("#base-slide-list .video-slide-item:first").data('index')).unmount()
+              $(".video-slide-item").each(function () {
+                $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+              })
+            }
+          } else {
+            if (this.currentSlideItemIndex > 1 && this.currentSlideItemIndex <= this.list.length - 4) {
+              let addItemIndex = this.currentSlideItemIndex - 2
+              this.slideList.prepend(this.getInsEl(this.list[addItemIndex], addItemIndex))
+              this.appInsMap.get($("#base-slide-list .video-slide-item:last").data('index')).unmount()
+              // $("#base-slide-list .base-slide-item:last").remove()
+              $(".video-slide-item").each(function () {
+                $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+              })
+            }
+          }
+          this.checkChildren()
+        }
+        this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px,  0px)`)
+      }
+      this.resetConfig()
+      this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
+    },
+    resetConfig() {
+      this.isCanDownWiping = false
+      this.isNeedCheck = true
+      this.moveXDistance = 0
+      this.moveYDistance = 0
+    },
+    getHeight(index) {
+      return this.wrapperHeight * index
+    },
+    checkDirection() {
+      if (!this.isNeedCheck) return
+      let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
+      if (angle < 0.6) {
+        //上下划
+        this.isCanDownWiping = true
+        this.isNeedCheck = false
+        return
+      }
+      if (angle > 5) {
+        //左右划
+        this.isCanDownWiping = false
+        this.isNeedCheck = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+#base-slide-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  #base-slide-list {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Test.vue b/src/pages/Test.vue
index da0c899..36f01e3 100644
--- a/src/pages/Test.vue
+++ b/src/pages/Test.vue
@@ -6,27 +6,23 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <SlideColumnList
-          ref="slideList"
-          direction="column"
-      >
-        <SlideItem v-for="(item,index)  of videos" :key="index">
-          <Video1
-              v-model:video="videos[index]"
-              @showComments="isCommenting = !isCommenting"
-              @showShare="isSharing = !isSharing"
-              @goUserInfo="baseActiveIndex = 1"
-          ></Video1>
-        </SlideItem>
-      </SlideColumnList>
+      <Share :is-sharing="true" ref="share"/>
 
     </div>
   </div>
 </template>
 <script>
+import SlideColumnList from "../components/slide/SlideColumnList";
+import SlideRowList from "../components/slide/SlideRowList";
+import Video1 from "../components/Video";
+import Comment from "../components/Comment";
+import Share from "../components/Share";
+import Me from "./me/Me";
+
 export default {
   name: "Test",
   props: {},
+  components: {SlideColumnList, SlideRowList, Video1, Comment, Share, Me},
   data() {
     return {
       videos: [
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 7c1ff1f..e841cd0 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -89,17 +89,15 @@
             </SlideColumnList>
           </SlideItem>
           <SlideItem>
-            <SlideColumnList
+            <SlideColumnVirtualList
                 ref="slideList"
-                direction="column"
-                :virtual="true"
                 :list="videos"
                 :renderSlide="render"
                 v-model:active-index="videoActiveIndex"
                 v-model:active-index1="videoActiveIndex"
                 @end="end"
             >
-            </SlideColumnList>
+            </SlideColumnVirtualList>
           </SlideItem>
         </SlideRowList>
         <Footer v-bind:init-tab="1"/>
@@ -196,7 +194,23 @@ export default {
           "status": 1
         }
       ],
-      videos: [],
+      videos: [
+        // {
+        //   "id": "d2f55373-80dd-4c14-93a7-7a40e9cbf049",
+        //   "posterUrl": "images/20210815/0.png",
+        //   "videoUrl": "http://qy9rc9xff.hn-bkt.clouddn.com/29.mp4",
+        //   "title": "",
+        //   "likeNum": null,
+        //   "commentNum": null,
+        //   "sharedNum": null,
+        //   "duration": null,
+        //   "musicId": "126f9654-450b-466c-8003-085199a7f9b9",
+        //   "browseCount": 0,
+        //   "createTime": "1629683008",
+        //   "createBy": "3e301843-e8bb-41c0-8240-9c4b42a17341",
+        //   "status": 1
+        // }
+      ],
       localVideos: [
         {
           videoUrl: mp40,
@@ -341,6 +355,9 @@ export default {
         let video = $(this).find('video')
         if ($(this).data('index') === newVal) {
           video.trigger('play')
+          video.on('canplay', () => {
+            video.trigger('play')
+          })
         } else {
           video.trigger('pause')
           setTimeout(() => {
@@ -370,7 +387,6 @@ export default {
       if (res.code === this.SUCCESS_CODE) {
         this.totalSize = res.data.count
         this.videos = this.videos.concat(res.data.list)
-
         // this.videos = this.$clone(this.localVideos)
       } else {
         this.pageNo--
@@ -380,7 +396,7 @@ export default {
       console.log(e)
     },
     end() {
-      console.log('end')
+      this.$notice('暂时没有更多了')
     }
   }
 }
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index 34cacff..2bdd600 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -3,6 +3,7 @@ import BaseHeader from "../components/BaseHeader";
 import SlideList from "../components/slide/SlideList";
 import SlideRowList from "../components/slide/SlideRowList";
 import SlideColumnList from "../components/slide/SlideColumnList";
+import SlideColumnVirtualList from "../components/slide/SlideColumnVirtualList";
 import SlideItem from "../components/slide/SlideItem";
 import Indicator from "../components/Indicator";
 import Video from "../components/Video";
@@ -19,6 +20,7 @@ export default {
     SlideList,
     SlideRowList,
     SlideColumnList,
+    SlideColumnVirtualList,
     SlideItem,
     Indicator,
     'Video1':Video,