From 3928d583ff3924a64add3bfd960867da94c030cb Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 4 Jul 2021 03:55:48 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E6=BB=91=E5=8A=A8=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E9=97=AA=E5=B1=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                   |  22 +-
 src/App.vue                         |   6 +
 src/pages/home/Index2.vue           | 189 +++++-----
 src/pages/home/SlideListVirtual.vue | 531 ++++++++++++++++++++++++++++
 src/test.html                       |  30 --
 src/test2.html                      | 121 -------
 6 files changed, 636 insertions(+), 263 deletions(-)
 create mode 100644 src/pages/home/SlideListVirtual.vue
 delete mode 100644 src/test.html
 delete mode 100644 src/test2.html
diff --git a/public/index.html b/public/index.html
index 3e5a139..92c9621 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,21 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+    <script crossorigin="anonymous"
+            integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
+            src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
+</head>
+<body>
+<noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index c5ed14d..8f29e31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,12 @@ export default {
 }
 </script>
 <style lang="scss">
+
+.base-slide-item {
+  min-width: 100vw;
+  min-height: 100vh;
+  position: relative;
+}
 #app {
   height: 100%;
   width: 100%;
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 5e2104f..312038d 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -1,43 +1,47 @@
 <template>
   <div id="home-index">
-    <SlideList direction="column"
-               ref="slideList"
-               @end="end"
-               @first="first"
-               :virtual="true"
-               :total="total"
-               @slide="slide"
+    <SlideListVirtual direction="column"
+                      ref="slideList"
+                      :virtual="true"
+                      :list="videos"
+                      :render="render"
     >
-      <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>
+    </SlideListVirtual>
   </div>
 </template>
 
 <script>
-import Comment from '../../components/Comment.vue'
-import Other from '../../components/Other.vue'
-import Share from '../../components/Share.vue'
-import Footer from "../../components/Footer.vue"
-import mp1 from '../../assets/video/1.mp4'
+import SlideListVirtual from './SlideListVirtual'
 import src1Bg from '../../assets/img/poster/src1-bg.png'
 import Video from "../../components/Video.vue";
-import mp41 from "../../assets/video/5.mp4";
+import mp40 from "../../assets/video/0.mp4";
+import mp41 from "../../assets/video/1.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";
+import mp46 from "../../assets/video/6.mp4";
+import mp47 from "../../assets/video/7.mp4";
+import mp48 from "../../assets/video/8.mp4";
+import mp49 from "../../assets/video/9.mp4";
+import mp410 from "../../assets/video/10.mp4";
 
 export default {
   name: "HomeIndex",
-  components: {Footer, Comment, Share, Other, Video},
+  components: {SlideListVirtual, Video},
   data() {
     return {
-      list: [1, 2, 3, 4, 5],
       videos: [
+        {
+          videoUrl: mp40,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: true,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
         {
           videoUrl: mp41,
           // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
@@ -88,95 +92,74 @@ export default {
           shared: 999,
           duration: 99
         },
+        {
+          videoUrl: mp46,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+        {
+          videoUrl: mp47,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+        {
+          videoUrl: mp48,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+        {
+          videoUrl: mp49,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
+        {
+          videoUrl: mp410,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999,
+          duration: 99
+        },
       ],
-      addCount: 0,
-      total: 10,
-      isCommenting: false,
-      isSharing: false,
-      baseActiveIndex: 0,
-      activeIndex: 2,
-      tabWidth: 30,
-      tabIndexRelationActiveIndexLefts: [],
-      slideMoveXDistance: 0,
-      slideMoveYDistance: 0,
-      height: 0,
-      width: 0,
-      toolbarStyleTransitionDuration: 0,
-      loading: false
+      render: item => {
+        return (
+            `
+            <div class="base-slide-item">
+              <video src="${item.videoUrl}" ref="video" muted autoplay loop style="width: 100vw;height: 100vh;">
+              <p> 您的浏览器不支持 video 标签。</p>
+            </video>
+      </div>
+           `
+        )
+      }
     }
   },
-  computed: {
-    itemTop() {
-      return {top: this.addCount * 812 + 'px'}
-    },
-  },
   mounted() {
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth
   },
-  methods: {
-    end() {
-      if (this.slideMoveYDistance > 60) {
-        this.getData()
-      }
-      this.slideMoveYDistance = 0;
-      this.toolbarStyleTransitionDuration = 300
-    },
-    first(e) {
-      if (this.loading) return
-    },
-    getData() {
-      this.loading = true
-      setTimeout(() => {
-        this.loading = false
-      }, 100)
-    },
-    slide(e) {
-      let {currentSlideItemIndex, isDrawDown} = e
-      if (isDrawDown) {
-        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.videos.shift()
-          }, 300)
-          this.$refs.slideList.checkChildren()
-        }
-      } else {
-        if (currentSlideItemIndex > 1 && currentSlideItemIndex + 3 < this.total) {
-          // this.videos.pop()
-          setTimeout(() => {
-            // 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()
-        }
-      }
-    },
-  },
-  created() {
-
-  },
 }
 </script>
 <style scoped lang="scss">
diff --git a/src/pages/home/SlideListVirtual.vue b/src/pages/home/SlideListVirtual.vue
new file mode 100644
index 0000000..97af9d3
--- /dev/null
+++ b/src/pages/home/SlideListVirtual.vue
@@ -0,0 +1,531 @@
+<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: {
+    render: {
+      type: Function,
+      default: () => {
+        return null
+      }
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    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: async function () {
+    await this.checkChildren(true)
+    if (this.virtual && this.render) {
+      this.list.slice(0, 2).map(v => {
+        this.slideList.innerHTML += this.render(v)
+      })
+    }
+    await 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.list.length - 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)`)
+      }
+    },
+    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.list.length - 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
+          }
+          console.log(this.slideItems)
+          let that = this
+          if (this.virtual) {
+            if (this.slideItems.length > 2) {
+              if (this.isDrawDown) {
+                $("#base-slide-list div:first").remove()
+                $(".base-slide-item").each(function () {
+                  $(this).css('top', (that.currentSlideItemIndex - 1) * that.wrapperHeight)
+                })
+                let item = this.list[this.currentSlideItemIndex + 1]
+                let s = $($(this.render(item))[0]).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
+                this.slideList.appendChild(s[0])
+              } else {
+                $("#base-slide-list div:last").remove()
+                $(".base-slide-item").each(function () {
+                  $(this).css('top', (that.currentSlideItemIndex - 1) * that.wrapperHeight)
+                })
+                let item = this.list[this.currentSlideItemIndex - 1]
+                let s = $($(this.render(item))[0]).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
+                $('#base-slide-list').prepend(s)
+              }
+            } else {
+              let item = this.list[this.currentSlideItemIndex + 1]
+              this.slideList.appendChild($(this.render(item))[0])
+            }
+            this.checkChildren()
+          }
+          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)
+    },
+    getData() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 1500)
+    },
+    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/test.html b/src/test.html
deleted file mode 100644
index e453784..0000000
--- a/src/test.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        .test {
-            width: 400px;
-            height: 600px;
-
-        }
-
-        img{
-            display: block;
-            width: 400px;
-            height: 600px;
-        }
-
-    </style>
-</head>
-<body>
-<div class="test">
-    <img class="poster" src="./assets/img/poster/1.jpg"/>
-    <div>
-        123
-    </div>
-</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/src/test2.html b/src/test2.html
deleted file mode 100644
index d6913f3..0000000
--- a/src/test2.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        html, body {
-            width: 100%;
-            height: 100%;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-        }
-
-        .swiper-container {
-            width: 100%;
-            height: 100%;
-        }
-
-        .swiper-wrapper{
-            display: flex;
-        }
-
-        .swiper-slide{
-            min-width: 100vw;
-        }
-    </style>
-</head>
-<body>
-<div class="swiper-container">
-    <div class="swiper-wrapper">
-        <div class="swiper-slide">
-            <p> Slide 1</p>
-            <p> Slide 2</p>
-            <p> Slide 3</p>
-            <p> Slide 4</p>
-            <p> Slide 5</p>
-            <p> Slide 6</p>
-            <p> Slide 7</p>
-            <p> Slide 8</p>
-            <p> Slide 9</p>
-            <p> Slide 1</p>
-            <p> Slide 2</p>
-            <p> Slide 3</p>
-            <p> Slide 4</p>
-            <p> Slide 5</p>
-            <p> Slide 6</p>
-            <p> Slide 7</p>
-            <p> Slide 8</p>
-            <p> Slide 9</p>
-            <p> Slide 1</p>
-            <p> Slide 2</p>
-            <p> Slide 3</p>
-            <p> Slide 4</p>
-            <p> Slide 5</p>
-            <p> Slide 6</p>
-            <p> Slide 7</p>
-            <p> Slide 8</p>
-            <p> Slide 9</p>
-            <p> Slide 1</p>
-            <p> Slide 2</p>
-            <p> Slide 3</p>
-            <p> Slide 4</p>
-            <p> Slide 5</p>
-            <p> Slide 6</p>
-            <p> Slide 7</p>
-            <p> Slide 8</p>
-            <p> Slide 9</p>
-            <p> Slide 1</p>
-            <p> Slide 2</p>
-            <p> Slide 3</p>
-            <p> Slide 4</p>
-            <p> Slide 5</p>
-            <p> Slide 6</p>
-            <p> Slide 7</p>
-            <p> Slide 8</p>
-            <p> Slide 9</p>
-            <p> Slide 1</p>
-            <p> Slide 2</p>
-            <p> Slide 3</p>
-            <p> Slide 4</p>
-            <p> Slide 5</p>
-            <p> Slide 6</p>
-            <p> Slide 7</p>
-            <p> Slide 8</p>
-            <p> Slide 9</p>
-            <p> Slide 1</p>
-            <p> Slide 2</p>
-            <p> Slide 3</p>
-            <p> Slide 4</p>
-            <p> Slide 5</p>
-            <p> Slide 6</p>
-            <p> Slide 7</p>
-            <p> Slide 8</p>
-            <p> Slide 9</p>
-            <p> Slide 1</p>
-            <p> Slide 2</p>
-            <p> Slide 3</p>
-            <p> Slide 4</p>
-            <p> Slide 5</p>
-            <p> Slide 6</p>
-            <p> Slide 7</p>
-            <p> Slide 8</p>
-            <p> Slide 9</p>
-        </div>
-        <div class="swiper-slide">
-            <p>Slide 2Slide 2Slide 2Slide 2Slide 2</p>
-            <p>Slide 2Slide 2Slide 2Slide 2Slide 2</p>
-            <p>Slide 2Slide 2Slide 2Slide 2Slide 2</p>
-            <p>Slide 2Slide 2Slide 2Slide 2Slide 2</p>
-        </div>
-        <div class="swiper-slide">Slide 3</div>
-    </div>
-</div>
-</body>
-<script>
-</script>
-</html>
