From 035a4710dc390a7af360a97be41a555aa20dcfa1 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 25 Sep 2021 01:52:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=BB=91=E5=8A=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                              |   1 +
 src/components/slide/SlideColumnList.vue |   2 +-
 src/components/slide/SlideRowList.vue    |  49 +++---
 src/pages/Test5.vue                      | 189 +++++++++++++++++++++--
 src/pages/home/Index2.vue                |   3 +-
 src/pages/home/LivePage.vue              |  27 ++--
 src/router/index.js                      |   2 +
 7 files changed, 216 insertions(+), 57 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f1aa9c0..9bc063e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,6 +56,7 @@ export default {
         '/home/music',
         '/home/music-rank-list',
         '/home/report',
+        '/home/search',
 
 
         '/message/share-to-friend',
diff --git a/src/components/slide/SlideColumnList.vue b/src/components/slide/SlideColumnList.vue
index 0b47319..855b5a5 100644
--- a/src/components/slide/SlideColumnList.vue
+++ b/src/components/slide/SlideColumnList.vue
@@ -147,7 +147,7 @@ export default {
       }
     },
     touchStart(e) {
-      console.log('this.slideItemsHeights',this.slideItemsHeights)
+      // console.log('this.slideItemsHeights',this.slideItemsHeights)
 
       this.$setCss(this.slideList, 'transition-duration', `0ms`)
       this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue
index 6c9a11f..e27bf80 100644
--- a/src/components/slide/SlideRowList.vue
+++ b/src/components/slide/SlideRowList.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="base-slide-wrapper" ref="slideWrapper">
-    <div class="indicator-home" v-if="showIndicator">
+    <div class="indicator-home" v-if="indicatorType === 'home'">
       <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
       <div class="toolbar" ref="toolbar" :style="toolbarStyle">
         <div class="left" @click="$nav('/home/live')">直播</div>
@@ -9,10 +9,12 @@
             <div class="tab"
                  :class="currentSlideItemIndex === 0?'active':''"
                  @click="changeIndex(false,0)">
-              <span>关注</span></div>
+              <span>关注</span>
+            </div>
             <div class="tab"
                  :class="currentSlideItemIndex === 1?'active':''"
-                 @click="changeIndex(false,1)"><span>推荐</span></div>
+                 @click="changeIndex(false,1)"><span>推荐</span>
+            </div>
           </div>
           <div class="indicator" ref="indicator"></div>
         </div>
@@ -29,7 +31,7 @@
     </div>
 
     <div id="base-slide-list" ref="slideList"
-         :style="{'flex-direction':'row',marginTop:indicatorFixed?'5rem':'0'}"
+         :style="{'flex-direction':'row'}"
          @touchstart="touchStart($event)"
          @touchmove="touchMove($event)"
          @touchend="touchEnd($event)">
@@ -64,14 +66,6 @@ export default {
       //progressbar
       //custom
     },
-    showIndicator: {
-      type: Boolean,
-      default: () => false
-    },
-    indicatorFixed: {
-      type: Boolean,
-      default: () => false
-    },
     useHomeLoading: {
       type: Boolean,
       default: () => false
@@ -86,8 +80,11 @@ export default {
     },
   },
   computed: {
+    isHome() {
+      return this.indicatorType === 'home'
+    },
     toolbarStyle() {
-      if (!this.useHomeLoading) return
+      if (!this.isHome) return
       return {
         opacity: 1 - this.homeLoadingMoveYDistance / 20,
         'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
@@ -95,7 +92,7 @@ export default {
       }
     },
     noticeStyle() {
-      if (!this.useHomeLoading) return
+      if (!this.isHome) return
       return {
         opacity: this.homeLoadingMoveYDistance / 60,
         'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
@@ -103,7 +100,7 @@ export default {
       }
     },
     loadingStyle() {
-      if (!this.useHomeLoading) return
+      if (!this.isHome) return
       if (this.loading) {
         return {
           opacity: 1,
@@ -158,7 +155,7 @@ export default {
   },
   mounted: async function () {
     await this.checkChildren(true)
-    this.showIndicator && this.initTabs()
+    this.isHome && this.initTabs()
     this.changeIndex(true)
 
     if (this.autoplay) {
@@ -177,7 +174,7 @@ export default {
       this.currentSlideItemIndex = index !== null ? index : this.activeIndex
       !init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
       this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
-      if (this.showIndicator) {
+      if (this.isHome) {
         this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
       }
       this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
@@ -189,10 +186,11 @@ export default {
         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))
+            item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.isHome ? this.tabWidth * 0.15 : 0))
       }
+      console.log(this.tabIndicatorRelationActiveIndexLefts)
       this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
-      if (this.showIndicator) {
+      if (this.isHome) {
         this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
         this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
       }
@@ -209,7 +207,7 @@ export default {
     },
     touchStart(e) {
       this.$setCss(this.slideList, 'transition-duration', `0ms`)
-      this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
+      this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
       this.toolbarStyleTransitionDuration = 0
 
       this.startLocationX = e.touches[0].pageX
@@ -230,7 +228,7 @@ export default {
 
       //多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
       //slideitem同时在左右移的情况，所以不能直接使用moveYDistance
-      if (this.isCanDownWiping && this.useHomeLoading && !this.loading) {
+      if (this.isCanDownWiping && this.isHome && !this.loading) {
         this.homeLoadingMoveYDistance = this.moveYDistance > 0 ? this.moveYDistance : 0
       }
 
@@ -250,13 +248,13 @@ export default {
             this.moveXDistance +
             (this.isDrawRight ? this.judgeValue : -this.judgeValue)}px, 0px, 0px)`)
 
-        this.showIndicator && this.$setCss(this.indicatorRef, 'left',
+        this.isHome && this.$setCss(this.indicatorRef, 'left',
             this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
             this.moveXDistance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
       }
     },
     touchEnd(e) {
-      if (this.useHomeLoading) {
+      if (this.isHome) {
         if (this.homeLoadingMoveYDistance > 60) {
           this.getData()
         }
@@ -269,7 +267,7 @@ export default {
         if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
 
         this.$setCss(this.slideList, 'transition-duration', `300ms`)
-        this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
+        this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
         let endTime = Date.now()
         let gapTime = endTime - this.startTime
 
@@ -289,7 +287,7 @@ export default {
           }
         }
         this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`)
-        if (this.showIndicator) {
+        if (this.isHome) {
           this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
         }
       }
@@ -391,6 +389,7 @@ export default {
     }
 
     .toolbar {
+      z-index: 2;
       position: relative;
       color: white;
       width: 100%;
diff --git a/src/pages/Test5.vue b/src/pages/Test5.vue
index 1fe9657..817d859 100644
--- a/src/pages/Test5.vue
+++ b/src/pages/Test5.vue
@@ -1,10 +1,173 @@
 <template>
   <div class="Test">
-    <div class="content1">
-      <BaseMarquee :is-play="true" :text="text" style="width: 150px;"/>
-      <BaseButton @click="triggerPause">pause</BaseButton>
-      <BaseButton @click="triggerStart">start</BaseButton>
-    </div>
+    <SlideRowList
+        style="height: calc(100% - 5rem);"
+        v-model:active-index="activeIndex"
+        indicatorType="home"
+    >
+      <SlideItem>
+        <SlideColumnList>
+          <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>
+        </SlideColumnList>
+      </SlideItem>
+      <SlideItem>
+        <SlideColumnList>
+          <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>
+        </SlideColumnList>
+      </SlideItem>
+    </SlideRowList>
   </div>
 </template>
 <script>
@@ -24,19 +187,14 @@ export default {
   },
   data() {
     return {
-      timer: null,
-      contentWidth: 0,
-      transformX: 0,
-      $marqueeContent: null,
+      activeIndex: 0,
+      showIndicator: true,
     }
   },
   methods: {
-    triggerPause() {
-      new Dom('.text').trigger('pause')
-    },
-    triggerStart() {
-      new Dom('.text').trigger('start')
-    },
+    changeIndex() {
+
+    }
   },
   mounted() {
   }
@@ -54,7 +212,6 @@ export default {
   top: 0;
   overflow: auto;
   font-size: 1.4rem;
-  color: white;
 
   .content1 {
     padding-top: 6rem;
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 63793b7..4ecdda3 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -8,8 +8,7 @@
         <SlideRowList
             style="height: calc(100% - 5rem);"
             v-model:active-index="activeIndex"
-            :showIndicator="true"
-            :useHomeLoading="true"
+            indicatorType="home"
         >
           <SlideItem>
             <SlideColumnList>
diff --git a/src/pages/home/LivePage.vue b/src/pages/home/LivePage.vue
index 8f4fa5c..4e226ad 100644
--- a/src/pages/home/LivePage.vue
+++ b/src/pages/home/LivePage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="LivePage" ref="page">
     <div class="live-wrapper">
-      <img src="../../assets/img/poster/11.jpg" alt="">
+      <img src="../../assets/img/poster/1.jpg" alt="">
     </div>
     <div class="float">
       <div class="top">
@@ -33,7 +33,7 @@
             <img src="../../assets/img/icon/avatar/2.png" alt="" class="round">
             <img src="../../assets/img/icon/avatar/3.png" alt="" class="round">
             <div class="round count">107</div>
-            <back class="round close" img="close" mode="light"/>
+            <back class="round close" img="close" mode="light" @click="$back"/>
           </div>
           <div class="more">
             <div class="wrapper">
@@ -87,7 +87,7 @@
     </div>
 
 
-    <!--    <base-button @click="sendGift">点击</base-button>-->
+    <base-button @click="sendComment">点击</base-button>
   </div>
 </template>
 <script>
@@ -163,15 +163,15 @@ export default {
   },
   mounted() {
     this.page = this.$refs.page
-    setInterval(async () => {
-      this.sendGift()
-      await this.$sleep(300)
-      this.sendGift()
-      this.joinUser()
-    }, 3000)
-    setInterval(async () => {
-      this.sendBarrage()
-    }, 5100)
+    // setInterval(async () => {
+    //   this.sendGift()
+    //   await this.$sleep(300)
+    //   this.sendGift()
+    //   this.joinUser()
+    // }, 3000)
+    // setInterval(async () => {
+    //   this.sendBarrage()
+    // }, 5100)
     // setInterval(async () => {
     //   this.sendComment()
     // }, 500)
@@ -217,7 +217,8 @@ export default {
       this.list.push('评论评论评论评论评论评论评论评论评论评论' + this.list.length)
       nextTick(() => {
         let comments = this.$refs['comments']
-        comments.scrollTop = comments.scrollHeight - comments.clientHeight
+        comments.scrollTo({top: comments.scrollHeight - comments.clientHeight, behavior: 'smooth'})
+        // comments.scrollTop = comments.scrollHeight - comments.clientHeight
       })
     },
     attention() {
diff --git a/src/router/index.js b/src/router/index.js
index 25ef8ea..0828974 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -52,6 +52,7 @@ import RequestUpdate from "../pages/me/RequestUpdate";
 import Test4 from "../pages/Test4";
 import Search from "../pages/home/SearchPage";
 import LivePage from "../pages/home/LivePage";
+import Test5 from "../pages/Test5";
 
 const routes = [
   // {path: '', component: Music},
@@ -61,6 +62,7 @@ const routes = [
   {path: '/test2', component: Test2},
   {path: '/test3', component: Test3},
   {path: '/test4', component: Test4},
+  {path: '/test5', component: Test5},
   {path: '/home', component: Index},
   {path: '/home/submit-report', component: SubmitReport},
   {path: '/home/music', component: Music},