From 75b8d4b65375bb9c4192d72ba9dadf803ec4f2af Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 3 Jul 2021 01:46:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Video.vue                 |   6 +-
 src/components/slide/SlideColumnList.vue | 483 +++++++++++++++++++++++
 src/components/slide/SlideList.vue       |  37 +-
 src/pages/home/Index.vue                 |   7 +-
 src/pages/home/Index2.vue                | 399 +++----------------
 src/router/index.js                      |   4 +-
 6 files changed, 577 insertions(+), 359 deletions(-)
 create mode 100644 src/components/slide/SlideColumnList.vue

diff --git a/src/components/Video.vue b/src/components/Video.vue
index 5acfd79..0e626c0 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -576,7 +576,7 @@ export default {
               height: 40px;
               position: relative;
               margin-bottom: 20px;
-              animation: test 1s ;
+              animation: test 1s;
               animation-delay: .5s;
 
               .avatar {
@@ -601,11 +601,11 @@ export default {
             @keyframes test {
               from {
                 display: block;
-                transform: translate3d(0,0,0);
+                transform: translate3d(0, 0, 0);
               }
               to {
                 display: none;
-                transform: translate3d(0,-60px,0);
+                transform: translate3d(0, -60px, 0);
               }
 
             }
diff --git a/src/components/slide/SlideColumnList.vue b/src/components/slide/SlideColumnList.vue
new file mode 100644
index 0000000..2e91e0c
--- /dev/null
+++ b/src/components/slide/SlideColumnList.vue
@@ -0,0 +1,483 @@
+<template>
+  <div id="base-slide-wrapper" ref="slideWrapper">
+    <div class="indicator-home" v-if="showIndicator && indicatorType === 'home'">
+      <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
+      <div class="toolbar" ref="toolbar" :style="toolbarStyle">
+        <div class="left">直播</div>
+        <div class="tab-ctn">
+          <div class="tabs" ref="tabs">
+            <div class="tab"
+                 :class="currentSlideItemIndex === 0?'active':''"
+                 @click="changeIndex(false,0)">
+              <span>关注</span></div>
+            <div class="tab"
+                 :class="currentSlideItemIndex === 1?'active':''"
+                 @click="changeIndex(false,1)"><span>推荐</span></div>
+          </div>
+          <div class="indicator" ref="indicator"></div>
+        </div>
+        <div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
+      </div>
+      <div class="loading" :style="loadingStyle">AA</div>
+    </div>
+    <div class="indicator-me" :class="indicatorFixed?'fixed':''" v-if="showIndicator && indicatorType === 'me'">
+      <div class="tabs" ref="tabs">
+        <div class="tab"
+             :class="currentSlideItemIndex === 0?'active':''"
+             @click="changeIndex(false,0)">
+          <span>作品</span></div>
+        <div class="tab"
+             :class="currentSlideItemIndex === 1?'active':''"
+             @click.stop="changeIndex(false,1)">
+          <span>私密</span>
+        </div>
+        <div class="tab"
+             :class="currentSlideItemIndex === 2?'active':''"
+             @click="changeIndex(false,2,$event)">
+          <span>喜欢</span>
+        </div>
+      </div>
+      <div class="indicator" ref="indicator"></div>
+    </div>
+    <div id="base-slide-list" ref="slideList"
+         :style="{'flex-direction':direction,marginTop:indicatorFixed?'42px':'0'}"
+         @touchstart="touchStart($event)"
+         @touchmove="touchMove($event)"
+         @touchend="touchEnd($event)">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseSlideList",
+  props: {
+    canMove: {
+      type: Boolean,
+      default: () => true
+    },
+    direction: {
+      type: String,
+      default: () => 'row'
+    },
+    showIndicator: {
+      type: Boolean,
+      default: () => false
+    },
+    indicatorFixed: {
+      type: Boolean,
+      default: () => false
+    },
+    indicatorType: {
+      type: String,
+      default: () => 'home'
+    },
+    useHomeLoading: {
+      type: Boolean,
+      default: () => false
+    },
+    virtual: {
+      type: Boolean,
+      default: () => false
+    },
+    total: {
+      type: Number,
+      default: () => 20
+    },
+    activeIndex: {
+      type: Number,
+      default: () => 0
+    },
+  },
+  computed: {
+    toolbarStyle() {
+      if (!this.useHomeLoading) return
+      return {
+        opacity: 1 - this.homeLoadingMoveYDistance / 20,
+        'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
+        transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
+      }
+    },
+    noticeStyle() {
+      if (!this.useHomeLoading) return
+      return {
+        opacity: this.homeLoadingMoveYDistance / 60,
+        'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
+        transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
+      }
+    },
+    loadingStyle() {
+      if (!this.useHomeLoading) return
+      if (this.loading) {
+        return {
+          opacity: 1,
+          'transition-duration': '300ms',
+        }
+      }
+      if (this.homeLoadingMoveYDistance !== 0) {
+        return {
+          opacity: this.homeLoadingMoveYDistance / 60,
+          'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
+          transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      wrapperWidth: 0,
+      wrapperHeight: 0,
+
+      startLocationX: 0,
+      startLocationY: 0,
+
+      moveXDistance: 0,
+      moveYDistance: 0,
+
+      judgeValue: 10,
+      startTime: 0,
+
+      currentSlideItemIndex: 0,
+      isDrawRight: true,
+      isDrawDown: true,
+      isCanRightWiping: false,
+      isCanDownWiping: false,
+      isNeedCheck: true,
+
+      slideList: null,
+      slideItems: null,
+      indicatorRef: null,
+      slideItemsWidths: [],
+      slideItemsHeights: [],
+      tabIndicatorRelationActiveIndexLefts: [],//指标和slideItem的index的对应left,
+      indicatorSpace: 0,//indicator之间的间距
+      toolbarStyleTransitionDuration: 0,
+      homeLoadingMoveYDistance: 0,//homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
+      //在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
+    }
+  },
+  watch: {
+    activeIndex() {
+      // console.log('activeIndex')
+      this.changeIndex()
+    },
+  },
+  mounted() {
+    this.checkChildren(true)
+    this.showIndicator && this.initTabs()
+    this.changeIndex(true)
+  },
+  methods: {
+    changeIndex(init = false, index = null, e) {
+      this.currentSlideItemIndex = index !== null ? index : this.activeIndex
+      !init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
+      if (this.direction === 'row') {
+        this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
+        if (this.showIndicator) {
+          this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
+        }
+      } else {
+        this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
+      }
+      this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
+
+    },
+    initTabs() {
+      let tabs = this.$refs.tabs
+      this.indicatorRef = this.$refs.indicator
+      for (let i = 0; i < tabs.children.length; i++) {
+        let item = tabs.children[i]
+        this.tabWidth = this.$getCss(item, 'width')
+        this.tabIndicatorRelationActiveIndexLefts.push(
+            item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.indicatorType === 'home' ? this.tabWidth * 0.15 : 0))
+      }
+      this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
+      if (this.showIndicator) {
+        this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
+        this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
+      }
+    },
+    checkChildren(init) {
+      this.slideList = this.$refs.slideList
+      this.slideItems = this.slideList.children
+      this.wrapperWidth = this.$getCss(this.slideList, 'width')
+      this.wrapperHeight = this.$getCss(this.slideList, 'height')
+
+      for (let i = 0; i < this.slideItems.length; i++) {
+        let el = this.slideItems[i]
+        this.slideItemsWidths.push(this.$getCss(el, 'width'))
+        this.slideItemsHeights.push(this.$getCss(el, '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()
+    },
+    touchMove(e) {
+      if (!this.canMove) return;
+      this.moveXDistance = e.touches[0].pageX - this.startLocationX
+      this.moveYDistance = e.touches[0].pageY - this.startLocationY
+
+      this.isDrawDown = this.moveYDistance < 0
+
+      this.checkDirection()
+
+      //多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
+      //slideitem同时在左右移的情况，所以不能直接使用moveYDistance
+      if (this.useHomeLoading && this.isCanDownWiping && !this.loading) {
+        this.homeLoadingMoveYDistance = this.moveYDistance
+      }
+
+      //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.virtual) {
+          if (this.currentSlideItemIndex === this.total - 1 && this.isDrawDown) return
+        } else {
+          if (this.currentSlideItemIndex === this.slideItems.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}px, 0px)`)
+      }
+    },
+    getData() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 1500)
+    },
+    touchEnd(e) {
+      this.$attrs['onEnd'] && this.$emit('end')
+      if (this.useHomeLoading) {
+        if (this.homeLoadingMoveYDistance > 60) {
+          this.getData()
+        }
+        this.toolbarStyleTransitionDuration = 300
+        this.homeLoadingMoveYDistance = 0
+      }
+
+      if (this.isCanDownWiping) {
+        this.$setCss(this.slideList, 'transition-duration', `300ms`)
+        this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
+        let endTime = Date.now()
+        let gapTime = endTime - this.startTime
+
+        if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
+        //禁止在最后页面的时候，向右划
+        if (this.virtual) {
+          if (this.currentSlideItemIndex === this.total - 1 && this.isDrawDown) return
+        } else {
+          if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
+        }
+
+        this.$stopPropagation(e)
+        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
+          }
+          this.$emit('slide', {
+            currentSlideItemIndex: this.currentSlideItemIndex,
+            isDrawDown: this.isDrawDown,
+            isDrawRight: this.isDrawRight
+          })
+        }
+        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.isCanRightWiping = false
+      this.isNeedCheck = true
+      this.moveXDistance = 0
+      this.moveYDistance = 0
+    },
+    getHeight(index) {
+      return this.slideItemsHeights.reduce((p, c, i) => {
+        if (i < index) {
+          //最后一页，如果宽度不够屏幕宽度，那不能拉完
+          if (this.slideItemsHeights.length - 1 === i + 1) {
+            p = p + c - (this.wrapperHeight - this.slideItemsHeights[index])
+          } else {
+            p += c
+          }
+        }
+        return p
+      }, 0)
+    },
+    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.isCanRightWiping = false
+        this.isNeedCheck = false
+        return
+      }
+      if (angle > 5) {
+        //左右划
+        this.isCanDownWiping = false
+        this.isCanRightWiping = true
+        this.isNeedCheck = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+#base-slide-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  #base-slide-list {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+
+  .indicator-home {
+    position: fixed;
+    font-size: 1.6rem;
+    top: 0;
+    left: 0;
+    height: 60px;
+    z-index: 2;
+    width: 100%;
+    color: white;
+
+    .notice {
+      opacity: 0;
+      top: 0;
+      position: absolute;
+      width: 100vw;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .loading {
+      opacity: 0;
+      top: 20px;
+      right: 15px;
+      position: absolute;
+
+    }
+
+    .toolbar {
+      position: relative;
+      color: white;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .tab-ctn {
+        width: 30%;
+        position: relative;
+
+        .tabs {
+          display: flex;
+          justify-content: space-between;
+          font-weight: bold;
+
+          .tab {
+            transition: color .3s;
+            color: gray;
+
+            &.active {
+              color: white;
+            }
+          }
+        }
+
+
+        .indicator {
+          //transition: left .3s;
+          position: absolute;
+          bottom: -8px;
+          height: 3px;
+          width: 20px;
+          background: #fff;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+
+  .indicator-me {
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    background: $main-bg;
+
+    .tabs {
+      display: flex;
+      justify-content: space-between;
+      font-weight: bold;
+
+      .tab {
+        height: 40px;
+        width: 33%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: gray;
+        transition: color .3s;
+
+        &.active {
+          color: white;
+        }
+      }
+    }
+
+    .indicator {
+      height: 2px;
+      background: gold;
+      width: 33%;
+      position: relative;
+      transition: all .3s;
+    }
+  }
+
+  .indicator-me.fixed {
+    position: fixed;
+  }
+
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/slide/SlideList.vue b/src/components/slide/SlideList.vue
index ed7f032..c23721a 100644
--- a/src/components/slide/SlideList.vue
+++ b/src/components/slide/SlideList.vue
@@ -50,6 +50,8 @@
 </template>
 
 <script>
+import {nextTick} from 'vue'
+
 export default {
   name: "BaseSlideList",
   props: {
@@ -164,8 +166,8 @@ export default {
       this.changeIndex()
     },
   },
-  mounted() {
-    this.checkChildren(true)
+  mounted: async function () {
+    await this.checkChildren(true)
     this.showIndicator && this.initTabs()
     this.changeIndex(true)
   },
@@ -199,17 +201,18 @@ export default {
         this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
       }
     },
-    checkChildren(init) {
-      this.slideList = this.$refs.slideList
-      this.slideItems = this.slideList.children
-      this.wrapperWidth = this.$getCss(this.slideList, 'width')
-      this.wrapperHeight = this.$getCss(this.slideList, 'height')
-
-      for (let i = 0; i < this.slideItems.length; i++) {
-        let el = this.slideItems[i]
-        this.slideItemsWidths.push(this.$getCss(el, 'width'))
-        this.slideItemsHeights.push(this.$getCss(el, 'height'))
-      }
+    async checkChildren(init) {
+      await nextTick(() => {
+        this.slideList = this.$refs.slideList
+        this.slideItems = this.slideList.children
+        this.wrapperWidth = this.$getCss(this.slideList, 'width')
+        this.wrapperHeight = this.$getCss(this.slideList, 'height')
+        for (let i = 0; i < this.slideItems.length; i++) {
+          let el = this.slideItems[i]
+          this.slideItemsWidths.push(this.$getCss(el, 'width'))
+          this.slideItemsHeights.push(this.$getCss(el, 'height'))
+        }
+      })
     },
     touchStart(e) {
       this.$setCss(this.slideList, 'transition-duration', `0ms`)
@@ -298,6 +301,7 @@ export default {
       // console.log(gapTime)
       // if (gapTime)
       if (this.direction === 'row') {
+        if (!this.isCanRightWiping) return this.resetConfig();
         if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
         if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
 
@@ -321,6 +325,7 @@ export default {
           this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
         }
       } else {
+        if (!this.isCanDownWiping) return this.resetConfig();
         if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
         //禁止在最后页面的时候，向右划
         if (this.virtual) {
@@ -328,7 +333,7 @@ export default {
         } else {
           if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
         }
-        console.log('column-end')
+        // console.log('column-end', this.moveYDistance)
 
         // this.$stopPropagation(e)
         if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
@@ -339,6 +344,10 @@ export default {
           } else {
             this.currentSlideItemIndex -= 1
           }
+          // console.log('gaptTime', gapTime)
+          // console.log('this.isDrawDown', this.isDrawDown)
+          // console.log('this.currentSlideItemIndex', this.currentSlideItemIndex)
+          // console.log('this.getHeight', -this.getHeight(this.currentSlideItemIndex))
           this.$emit('slide', {
             currentSlideItemIndex: this.currentSlideItemIndex,
             isDrawDown: this.isDrawDown,
diff --git a/src/pages/home/Index.vue b/src/pages/home/Index.vue
index f01bd23..c64d0b9 100644
--- a/src/pages/home/Index.vue
+++ b/src/pages/home/Index.vue
@@ -90,7 +90,7 @@
             </SlideList>
           </SlideItem>
           <SlideItem>
-            <SlideList
+            <SlideColumnList
                 direction="column"
                 ref="slideList"
                 v-model:active-index="videoActiveIndex"
@@ -106,7 +106,7 @@
                     @goUserInfo="baseActiveIndex = 1"
                 ></Video>
               </SlideItem>
-            </SlideList>
+            </SlideColumnList>
           </SlideItem>
         </SlideList>
         <Footer v-bind:init-tab="1"/>
@@ -173,10 +173,11 @@ import mp44 from '../../assets/video/4.mp4'
 import mp45 from '../../assets/video/5.mp4'
 import src1Bg from '../../assets/img/poster/src1-bg.png'
 import Video from "../../components/Video.vue";
+import SlideColumnList from "../../components/slide/SlideColumnList";
 
 export default {
   name: "HomeIndex",
-  components: {Footer, Comment, Share, Other, Video},
+  components: {Footer, Comment, Share, Other, Video, SlideColumnList},
   data() {
     return {
       list: [1, 2, 3, 4, 5],
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index dcbcebc..5e2104f 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -1,215 +1,19 @@
 <template>
   <div id="home-index">
-    <div class="toolbar-ctn">
-      <div class="toolbar" :style="toolbarStyle">
-        <div class="left">直播</div>
-        <div class="tab-ctn">
-          <div class="tabs" ref="tabs">
-            <div class="tab"><span>双流</span></div>
-            <div class="tab"><span>关注</span></div>
-            <div class="tab"><span>推荐</span></div>
-          </div>
-          <div class="index" :style="tabIndexStyle"></div>
-        </div>
-        <div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
-      </div>
-      <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
-      <div class="loading" :style="loadingStyle">AA</div>
-    </div>
-    <SlideList v-model:active-index="baseActiveIndex">
-      <SlideItem>
-        <SlideList v-model:active-index="activeIndex"
-        >
-          <SlideItem style="overflow:auto;">
-            <div>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-              <p>同城页</p>
-            </div>
-          </SlideItem>
-          <SlideItem>
-            <SlideList direction="column"
-                       @end="end"
-                       @first="first"
-            >
-              <SlideItem style="background: tan">
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-                <p>111111111111</p>
-              </SlideItem>
-              <SlideItem style="background: red;">
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-                <p>222222222222</p>
-              </SlideItem>
-              <SlideItem style="background: yellow">
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-                <p>3333333333333</p>
-              </SlideItem>
-            </SlideList>
-          </SlideItem>
-          <SlideItem>
-            <SlideList direction="column"
-                       ref="slideList"
-                       :virtual="true"
-                       :total="total"
-                       @end="end"
-                       @first="first"
-                       @slide="slide">
-              <SlideItem :style="itemTop" v-for="(item,index)  of videos">
-                <Video
-                    v-model:video="videos[index]"
-                    @showComments="isCommenting = !isCommenting"
-                    @showShare="isSharing = !isSharing"
-                    @goUserInfo="baseActiveIndex = 1"
-                ></Video>
-              </SlideItem>
-            </SlideList>
-          </SlideItem>
-        </SlideList>
-        <Footer v-bind:init-tab="1"/>
-      </SlideItem>
-      <SlideItem style="font-size: 40px;overflow:auto;">
-        <div>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-          <p>详情页</p>
-        </div>
+    <SlideList direction="column"
+               ref="slideList"
+               @end="end"
+               @first="first"
+               :virtual="true"
+               :total="total"
+               @slide="slide"
+    >
+      <SlideItem v-for="item in videos" :style="itemTop">
+        <video :src="item.videoUrl" ref="video" muted autoplay loop style="width: 100vw;height: 100vh;">
+          <p> 您的浏览器不支持 video 标签。</p>
+        </video>
       </SlideItem>
     </SlideList>
-    <Comment v-model:is-commenting="isCommenting"/>
-    <Share v-model:is-sharing="isSharing" ref="share"/>
   </div>
 </template>
 
@@ -220,61 +24,69 @@ import Share from '../../components/Share.vue'
 import Footer from "../../components/Footer.vue"
 import mp1 from '../../assets/video/1.mp4'
 import src1Bg from '../../assets/img/poster/src1-bg.png'
-import SlideItem from './SlideItem.vue'
-import SlideList from './SlideList.vue'
 import Video from "../../components/Video.vue";
+import mp41 from "../../assets/video/5.mp4";
+import mp42 from "../../assets/video/2.mp4";
+import mp43 from "../../assets/video/3.mp4";
+import mp44 from "../../assets/video/4.mp4";
+import mp45 from "../../assets/video/5.mp4";
 
 export default {
   name: "HomeIndex",
-  components: {Footer, Comment, Share, Other, SlideList, SlideItem, Video},
+  components: {Footer, Comment, Share, Other, Video},
   data() {
     return {
       list: [1, 2, 3, 4, 5],
       videos: [
         {
-          videoUrl: mp1,
+          videoUrl: mp41,
           // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
           videoPoster: src1Bg,
           isLoved: true,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration: 99
         },
         {
-          videoUrl: mp1,
+          videoUrl: mp42,
           // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
           videoPoster: src1Bg,
           isLoved: false,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration: 99
         },
         {
-          videoUrl: mp1,
+          videoUrl: mp43,
           // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
           videoPoster: src1Bg,
           isLoved: false,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration: 99
         },
         {
-          videoUrl: mp1,
+          videoUrl: mp44,
           // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
           videoPoster: src1Bg,
           isLoved: false,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration: 99
         },
         {
-          videoUrl: mp1,
+          videoUrl: mp45,
           // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
           videoPoster: src1Bg,
           isLoved: false,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration: 99
         },
       ],
       addCount: 0,
@@ -297,53 +109,8 @@ export default {
     itemTop() {
       return {top: this.addCount * 812 + 'px'}
     },
-    tabIndexStyle() {
-      return {
-        width: `${this.tabWidth * 0.7}px`,
-        //如果用slide emit的moveX会很卡很卡
-        transform: `translate3d(${this.tabIndexRelationActiveIndexLefts[this.activeIndex]}px, 0, 0)`,
-        'transition-duration': '300ms',
-      }
-    },
-    toolbarStyle() {
-      return {
-        opacity: 1 - this.slideMoveYDistance / 20,
-        'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
-        transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
-      }
-    },
-    noticeStyle() {
-      return {
-        opacity: this.slideMoveYDistance / 60,
-        'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
-        transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
-      }
-    },
-    loadingStyle() {
-      if (this.loading) {
-        return {
-          opacity: 1,
-          'transition-duration': '300ms',
-        }
-      }
-      if (this.slideMoveYDistance !== 0) {
-        return {
-          opacity: this.slideMoveYDistance / 60,
-          'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
-          transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
-        }
-      }
-    }
   },
   mounted() {
-    let tabs = this.$refs.tabs
-    // let tabWidth = this.$getCss(tabs, 'width')
-    for (let i = 0; i < tabs.children.length; i++) {
-      let item = tabs.children[i]
-      this.tabWidth = this.$getCss(item, 'width')
-      this.tabIndexRelationActiveIndexLefts.push(
-          item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + this.tabWidth * 0.15)
-    }
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth
   },
@@ -357,32 +124,50 @@ export default {
     },
     first(e) {
       if (this.loading) return
-      this.slideMoveYDistance = e
-      this.toolbarStyleTransitionDuration = 0
     },
     getData() {
       this.loading = true
       setTimeout(() => {
         this.loading = false
-      }, 1500)
+      }, 100)
     },
     slide(e) {
       let {currentSlideItemIndex, isDrawDown} = e
       if (isDrawDown) {
-        if (this.list.length - 3 < currentSlideItemIndex && currentSlideItemIndex + 2 < this.total) {
-          this.list.push(currentSlideItemIndex + 3)
+        if (this.videos.length - 3 < currentSlideItemIndex && currentSlideItemIndex + 2 < this.total) {
+          // this.list.push(currentSlideItemIndex + 3)
+          console.log('push')
+          this.videos.push({
+            videoUrl: require(`../../assets/video/${currentSlideItemIndex + 3}.mp4`),
+            videoPoster: src1Bg,
+            isLoved: true,
+            loves: 1234,
+            comments: 666,
+            shared: 999,
+            duration: 99
+          },)
+          // this.addCount += 1
+          // this.videos.shift()
           setTimeout(() => {
-            this.addCount += 1
-            this.list.shift()
+            // this.addCount += 1
+            // this.videos.shift()
           }, 300)
           this.$refs.slideList.checkChildren()
         }
       } else {
         if (currentSlideItemIndex > 1 && currentSlideItemIndex + 3 < this.total) {
-          this.list.pop()
+          // this.videos.pop()
           setTimeout(() => {
-            this.addCount -= 1
-            this.list.unshift(currentSlideItemIndex - 1)
+            // this.addCount -= 1
+            this.videos.unshift({
+              videoUrl: require(`../../assets/video/${currentSlideItemIndex - 1}.mp4`),
+              videoPoster: src1Bg,
+              isLoved: true,
+              loves: 1234,
+              comments: 666,
+              shared: 999,
+              duration: 99
+            },)
           }, 300)
           this.$refs.slideList.checkChildren()
         }
@@ -399,67 +184,5 @@ export default {
   height: 100%;
   width: 100%;
   position: relative;
-
-  .toolbar-ctn {
-    position: fixed;
-    font-size: 1.6rem;
-    top: 0;
-    left: 0;
-    height: 60px;
-    z-index: 2;
-    width: 100%;
-    color: white;
-
-    .notice {
-      opacity: 0;
-      top: 0;
-      position: absolute;
-      width: 100vw;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .loading {
-      opacity: 0;
-      top: 20px;
-      right: 15px;
-      position: absolute;
-
-    }
-
-    .toolbar {
-      position: relative;
-      color: white;
-      //background: #fff;
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      padding: 0 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      //display: none;
-
-      .tab-ctn {
-        width: 40%;
-        position: relative;
-
-        .tabs {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        .index {
-          position: absolute;
-          bottom: -8px;
-          height: 3px;
-          background: #fff;
-          border-radius: 5px;
-        }
-      }
-    }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 3bc7922..ade1838 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,10 +10,12 @@ import countryChoose from "../pages/login/countryChoose";
 import MyCard from "../pages/me/MyCard";
 import MyCollect from "../pages/me/MyCollect";
 import VideoDetail from "../pages/me/VideoDetail";
+import Index2 from "../pages/home/Index2";
 
 const routes = [
   // {path: '', component: Music},
-  {path: '/', component: Index},
+  // {path: '/', component: Index},
+  {path: '/', component: Index2},
   {path: '/home', component: Index},
   {path: '/attention', component: Attention},
   {path: '/message', component: Message},