From b667211da7088f015db842b814c8003bba846f7c Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 6 Mar 2024 02:44:22 +0800
Subject: [PATCH] save

---
 src/components/slide/Indicator.vue            |   2 +-
 src/components/slide/IndicatorLight.vue       |   2 +-
 src/components/slide/SlideColumnList.vue      | 199 ------------------
 src/components/slide/SlideList.vue            |   4 +-
 src/components/slide/SlideRowList.vue         | 104 +--------
 .../slide/UNUSE_SlideColumnVirtualList.txt    |   2 +-
 src/pages/home/MusicRankList.vue              |   6 +-
 src/pages/home/Publish.vue                    |  18 +-
 src/pages/home/SearchPage.vue                 |   4 +-
 src/pages/me/Me.less                          |   2 +-
 src/pages/me/Me.vue                           |  10 +-
 src/pages/me/MyMusic.vue                      |   4 +-
 src/pages/me/components/CollectMusic.vue      |  10 +-
 src/pages/me/rightMenu/LookHistory.vue        |   5 +-
 src/pages/people/FindAcquaintance.vue         |   4 +-
 src/pages/people/FollowAndFans.vue            |   4 +-
 src/utils/mixin.js                            |   4 +-
 17 files changed, 45 insertions(+), 339 deletions(-)
 delete mode 100644 src/components/slide/SlideColumnList.vue

diff --git a/src/components/slide/Indicator.vue b/src/components/slide/Indicator.vue
index b407a19..82c97a3 100644
--- a/src/components/slide/Indicator.vue
+++ b/src/components/slide/Indicator.vue
@@ -77,7 +77,7 @@ export default {
   methods: {
     changeIndex(index) {
       this.currentSlideItemIndex = index
-      this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
+      this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
       this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
       this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
     },
diff --git a/src/components/slide/IndicatorLight.vue b/src/components/slide/IndicatorLight.vue
index 110aef0..fe6849b 100644
--- a/src/components/slide/IndicatorLight.vue
+++ b/src/components/slide/IndicatorLight.vue
@@ -76,7 +76,7 @@ export default {
   methods: {
     changeIndex(index) {
       this.currentSlideItemIndex = index
-      this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
+      this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
       this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
       this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
     },
diff --git a/src/components/slide/SlideColumnList.vue b/src/components/slide/SlideColumnList.vue
deleted file mode 100644
index da5eea5..0000000
--- a/src/components/slide/SlideColumnList.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<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 {nextTick} from "vue";
-
-export default {
-  name: "BaseSlideList",
-  props: {
-    activeIndex: {
-      type: Number,
-      default: () => 0
-    },
-    //改变index，是否使用动画
-    changeActiveIndexUseAnim: {
-      type: Boolean,
-      default: true
-    },
-    canMove: {
-      type: Boolean,
-      default: true
-    },
-  },
-  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: [],
-    }
-  },
-  watch: {
-    activeIndex(newVal) {
-      this.changeIndex()
-    },
-  },
-  computed: {},
-  mounted: async function () {
-    await this.checkChildren()
-  },
-  methods: {
-    async changeIndex() {
-      await this.checkChildren()
-      this.currentSlideItemIndex = this.activeIndex
-      if (this.changeActiveIndexUseAnim) {
-        this.$setCss(this.slideList, 'transition-duration', `300ms`)
-      }
-      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)
-    },
-    checkChildren() {
-      return new Promise(resolve => {
-        nextTick(() => {
-          this.slideList = this.$refs.slideList
-          this.slideItems = this.slideList.children
-          this.wrapperHeight = this.$getCss(this.slideList, 'height')
-          this.slideItemsHeights = []
-          for (let i = 0; i < this.slideItems.length; i++) {
-            let el = this.slideItems[i]
-            this.slideItemsHeights.push(this.$getCss(el, 'height'))
-          }
-          resolve()
-        })
-      })
-    },
-    touchStart(e) {
-      this.checkChildren()
-      this.$setCss(this.slideList, 'transition-duration', `0ms`)
-      this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
-      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()
-
-      if (this.isCanDownWiping) {
-        if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return; //在第一个item，并且想往下划。
-        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 +
-        (this.isDrawDown ? this.judgeValue : -this.judgeValue)
-        }px, 0px)`)
-      }
-    },
-    touchEnd(e) {
-      if (!this.canMove) return;
-      if (this.isCanDownWiping) {
-        if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
-        if (this.currentSlideItemIndex === this.slideItems.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
-          }
-        }
-        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.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
-      if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) {
-        let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
-        if (angle > 1) {
-          this.isCanDownWiping = false
-          this.isCanRightWiping = true
-          // console.log('横划')
-        } else {
-          this.isCanDownWiping = true
-          this.isCanRightWiping = false
-          // console.log('竖划')
-        }
-        // console.log(angle)
-        return this.isNeedCheck = false
-      }
-      return this.isNeedCheck = true
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-@import "../../assets/less/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/components/slide/SlideList.vue b/src/components/slide/SlideList.vue
index 19c7680..585d52a 100644
--- a/src/components/slide/SlideList.vue
+++ b/src/components/slide/SlideList.vue
@@ -183,7 +183,7 @@ export default {
       } 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)
+      this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
 
     },
     initTabs() {
@@ -357,7 +357,7 @@ export default {
         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)
+      this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
     },
     resetConfig() {
       this.isCanDownWiping = false
diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue
index 18732f8..60fb2ce 100644
--- a/src/components/slide/SlideRowList.vue
+++ b/src/components/slide/SlideRowList.vue
@@ -1,31 +1,5 @@
 <template>
   <div id="base-slide-wrapper" ref="slideWrapper">
-    <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>
-        <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>
-        <img src="../../assets/img/icon/search-gray.png" alt=""
-             :style="{opacity:loading ? 0 : 1}"
-             @click="$nav('/home/search')"
-             style="margin-top: 5rem;">
-      </div>
-      <Loading class="loading" style="width: 40rem;" :style="loadingStyle" :is-full-screen="false"/>
-    </div>
-
     <div class="indicator-bullets" v-if="indicatorType === 'bullets' && slideItems.length">
       <div class="bullet" :class="{active:currentSlideItemIndex === item-1}" v-for="item in slideItems.length"></div>
     </div>
@@ -177,7 +151,7 @@ export default {
       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)
+      this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
     },
     initTabs() {
       let tabs = this.$refs.tabs
@@ -293,7 +267,7 @@ export default {
         }
       }
       this.resetConfig()
-      this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
+      this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
       this.$attrs['onEnd'] && this.$emit('end')
       bus.emit(this.name + '-end', this.currentSlideItemIndex)
     },
@@ -360,80 +334,6 @@ export default {
     position: relative;
   }
 
-  .indicator-home {
-    position: fixed;
-    font-size: 16rem;
-    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: 13rem;
-      right: 15rem;
-      position: absolute;
-
-    }
-
-    .toolbar {
-      z-index: 2;
-      position: relative;
-      color: white;
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      padding: 0 15rem;
-      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: -8rem;
-          height: 3rem;
-          width: 20rem;
-          background: #fff;
-          border-radius: 5rem;
-        }
-      }
-    }
-  }
-
   .indicator-bullets {
     position: absolute;
     bottom: 10rem;
diff --git a/src/components/slide/UNUSE_SlideColumnVirtualList.txt b/src/components/slide/UNUSE_SlideColumnVirtualList.txt
index 3668167..7426086 100644
--- a/src/components/slide/UNUSE_SlideColumnVirtualList.txt
+++ b/src/components/slide/UNUSE_SlideColumnVirtualList.txt
@@ -271,7 +271,7 @@ export default {
         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)
+      this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
     },
     resetConfig() {
       this.isCanDownWiping = false
diff --git a/src/pages/home/MusicRankList.vue b/src/pages/home/MusicRankList.vue
index 86d9bb2..2752ae6 100644
--- a/src/pages/home/MusicRankList.vue
+++ b/src/pages/home/MusicRankList.vue
@@ -21,9 +21,9 @@
           :tabTexts="['热歌榜','飙升樘','原创榜']"
           v-model:active-index="contentIndex">
       </Indicator>
-      <SlideRowList
+      <SlideHorizontal
           name="musicRankList"
-          v-model:active-index="contentIndex">
+          v-model:index="contentIndex">
         <SlideItem>
           <div class="list">
             <div class="item" v-for="(item,index) in hotList" @click="togglePlay(item,hotList)">
@@ -168,7 +168,7 @@
             </div>
           </div>
         </SlideItem>
-      </SlideRowList>
+      </SlideHorizontal>
     </div>
   </div>
 </template>
diff --git a/src/pages/home/Publish.vue b/src/pages/home/Publish.vue
index 273b9e9..38fbd58 100644
--- a/src/pages/home/Publish.vue
+++ b/src/pages/home/Publish.vue
@@ -2,22 +2,24 @@
   <div class="Publish">
     <video id="video" autoplay="autoplay" style="width: 100%;height:calc(100% - 60rem);"></video>
     <div class="footer">
-      <SlideRowList v-model:active-index="activeIndex">
-        <SlideItem style="min-width: 20vw;min-height: 60rem;"></SlideItem>
-        <SlideItem style="min-width: 20vw;min-height: 60rem;"></SlideItem>
-        <SlideItem style="min-width: 25vw;min-height: 60rem;" @click="activeIndex = 0">
+      <SlideHorizontal
+          style="height: 60rem;"
+          v-model:index="activeIndex">
+        <SlideItem style="width: 20vw"></SlideItem>
+        <SlideItem style="width: 20vw"></SlideItem>
+        <SlideItem style="width: 25vw" @click="activeIndex = 0">
           <span :class="activeIndex + 2 === 2?'active':''">分段拍</span>
         </SlideItem>
-        <SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 1">
+        <SlideItem style="width: 20vw" @click="activeIndex = 1">
           <span :class="activeIndex + 2 === 3?'active':''">快拍</span>
         </SlideItem>
-        <SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 2">
+        <SlideItem style="width: 20vw" @click="activeIndex = 2">
           <span :class="activeIndex + 2 === 4?'active':''">影集</span>
         </SlideItem>
-        <SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 3">
+        <SlideItem style="width: 20vw" @click="activeIndex = 3">
           <span :class="activeIndex + 2 === 5?'active':''">开直播</span>
         </SlideItem>
-      </SlideRowList>
+      </SlideHorizontal>
     </div>
     <div class="float">
       <img class="close" src="../../assets/img/icon/close-white.png" alt="" @click="$back">
diff --git a/src/pages/home/SearchPage.vue b/src/pages/home/SearchPage.vue
index a186106..d8ab5bb 100644
--- a/src/pages/home/SearchPage.vue
+++ b/src/pages/home/SearchPage.vue
@@ -46,7 +46,7 @@
           <div class="tab" :class="{active:slideIndex === 3}" @click="slideIndex = 3">品牌榜</div>
         </div>
         <!--        TODO 滚动到下面的时候，应该禁止slide-move，因为第个slideitem的高度不一样，高的切到矮的，会闪屏-->
-        <SlideRowList v-model:active-index="slideIndex" :style="slideListHeight">
+        <SlideHorizontal v-model:index="slideIndex" :style="slideListHeight">
           <SlideItem>
             <div class="slide0" ref="slide0">
               <div class="l-row">
@@ -191,7 +191,7 @@
               </SlideRowList>
             </div>
           </SlideItem>
-        </SlideRowList>
+        </SlideHorizontal>
       </div>
     </div>
   </div>
diff --git a/src/pages/me/Me.less b/src/pages/me/Me.less
index 6bc0a51..c994c83 100644
--- a/src/pages/me/Me.less
+++ b/src/pages/me/Me.less
@@ -457,7 +457,7 @@
       box-sizing: border-box;
       background: @main-bg;
       width: 100%;
-      padding: 10rem 20rem;
+      padding: 10rem 26rem;
       list-style: none;
       display: flex;
       align-items: center;
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 9f6a50c..657b2ba 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -2,7 +2,8 @@
   <div class="Me">
     <SlideRowList
         name="baseSlide"
-        style="width: 100vw;" v-model:active-index="baseActiveIndex">
+        style="width: 100vw;"
+        v-model:active-index="baseActiveIndex">
       <SlideItem>
         <div ref="float" class="float" :class="floatFixed?'fixed':''">
           <div
@@ -14,7 +15,7 @@
           </div>
           <transition name="fade">
             <div class="center" v-if="floatShowName">
-              <p class="name f20 mt1r mb1r">{{ userinfo.nickname }}</p>
+              <p class="name f15 mt1r mb1r">{{ userinfo.nickname }}</p>
             </div>
           </transition>
           <div class="right">
@@ -224,7 +225,7 @@
           <div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
         </transition>
       </SlideItem>
-      <SlideItem style="min-width: 70vw; overflow:auto;">
+      <SlideItem style="width: 70vw; overflow:auto;">
         <transition name="fade1">
           <div class="ul" v-if="!isMoreFunction">
             <div class="li" @click="$no">
@@ -359,10 +360,11 @@ import {mapState} from "vuex";
 import bus from "../../utils/bus";
 import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 import {$no} from "@/utils";
+import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 
 export default {
   name: "Me",
-  components: {Posters, Footer, Indicator, ConfirmDialog},
+  components: {Posters, Footer, Indicator, ConfirmDialog, SlideHorizontal},
   data() {
     return {
       previewImg: '',
diff --git a/src/pages/me/MyMusic.vue b/src/pages/me/MyMusic.vue
index d15a632..3bbf1a8 100644
--- a/src/pages/me/MyMusic.vue
+++ b/src/pages/me/MyMusic.vue
@@ -9,7 +9,7 @@
       </IndicatorLight>
       <dy-back style="opacity: 0;" mode="light" img="back"/>
     </div>
-    <SlideRowList name="myMusicList" v-model:active-index="slideIndex">
+    <SlideHorizontal name="myMusicList" v-model:index="slideIndex">
       <SlideItem>
         <GuessMusic :list="guessMusic"/>
       </SlideItem>
@@ -98,7 +98,7 @@
           </transition>
         </div>
       </SlideItem>
-    </SlideRowList>
+    </SlideHorizontal>
     <transition name="my-collect-dialog">
       <div class="my-collect-dialog" v-show="isShowCollectDialog">
         <div class="dialog-header">
diff --git a/src/pages/me/components/CollectMusic.vue b/src/pages/me/components/CollectMusic.vue
index 1180207..2d7087d 100644
--- a/src/pages/me/components/CollectMusic.vue
+++ b/src/pages/me/components/CollectMusic.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="CollectMusic">
-    <SlideColumnList
+    <SlideVertical
         :changeActiveIndexUseAnim="false"
-        v-model:active-index="activeIndex"
+        v-model:index="activeIndex"
         :canMove="slideCanMove">
       <SlideItemMusic
           :ref="setItemRef"
@@ -14,7 +14,7 @@
           v-model="list[index]"
           v-model:isLoop="isLoop"
           v-for="(item,index) in list "/>
-    </SlideColumnList>
+    </SlideVertical>
     <from-bottom-dialog
         mask-mode="lightgray"
         page-id="CollectMusic"
@@ -63,18 +63,18 @@ import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
 import Switches from "../../message/components/swtich/switches";
 import SlideItemMusic from "./SlideItemMusic";
 import IndicatorLight from "../../../components/slide/IndicatorLight";
-import SlideColumnList from "../../../components/slide/SlideColumnList";
 import Share from "../../../components/Share";
 import ShareToFriend from "../../home/components/ShareToFriend";
+import SlideVertical from "@/components/slide/SlideVertical.vue";
 
 export default {
   name: "GuessMusic",
   components: {
+    SlideVertical,
     FromBottomDialog,
     Switches,
     SlideItemMusic,
     IndicatorLight,
-    SlideColumnList,
     Share,
     ShareToFriend
   },
diff --git a/src/pages/me/rightMenu/LookHistory.vue b/src/pages/me/rightMenu/LookHistory.vue
index 6c5a8f4..effc8a2 100644
--- a/src/pages/me/rightMenu/LookHistory.vue
+++ b/src/pages/me/rightMenu/LookHistory.vue
@@ -15,7 +15,8 @@
           :tabTexts="['视频','影视综']"
           v-model:active-index="currentSlideItemIndex">
       </Indicator>
-      <SlideRowList v-model:active-index="currentSlideItemIndex" class="SlideRowList">
+      <SlideHorizontal
+          v-model:index="currentSlideItemIndex" class="SlideRowList">
         <SlideItem class="tab1" style="overflow:auto;">
           <Scroll class="Scroll"
                   @pulldown="getHistoryVideo">
@@ -36,7 +37,7 @@
             <div class="title">暂无观影历史记录</div>
           </div>
         </SlideItem>
-      </SlideRowList>
+      </SlideHorizontal>
     </div>
   </div>
 </template>
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index 61248b6..1ffbfb6 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -10,7 +10,7 @@
       </Indicator>
       <img src="../../assets/img/icon/menu-gray.png" alt="" class="option" @click="moreOptionDialog = true">
     </div>
-    <SlideRowList v-model:active-index="currentSlideItemIndex">
+    <SlideHorizontal v-model:index="currentSlideItemIndex">
       <SlideItem class="tab1" style="overflow: auto;">
         <div class="mr2r ml2r mt1r">
           <Search v-if="!isShowRightText"
@@ -55,7 +55,7 @@
         <People v-for="item in friends.all " :people="item" mode="friend"></People>
         <NoMore class="mb5r"/>
       </SlideItem>
-    </SlideRowList>
+    </SlideHorizontal>
 
     <transition name="fade">
       <Mask v-if="maskDialog" @click="maskDialog = false"></Mask>
diff --git a/src/pages/people/FollowAndFans.vue b/src/pages/people/FollowAndFans.vue
index 76b4069..6c1ab80 100644
--- a/src/pages/people/FollowAndFans.vue
+++ b/src/pages/people/FollowAndFans.vue
@@ -19,7 +19,7 @@
             v-model:active-index="slideIndex">
         </Indicator>
       </div>
-      <SlideRowList v-model:active-index="slideIndex" style="height: calc(100vh - 111rem)">
+      <SlideHorizontal v-model:index="slideIndex" style="height: calc(100vh - 111rem)">
         <SlideItem class="tab1">
           <Search v-model="searchKey" placeholder="搜索用户备注或名字" :is-show-right-text="false"/>
           <div class="is-search" v-if="searchKey">
@@ -42,7 +42,7 @@
           <People v-for="item in friends.all" :people="item"></People>
           <NoMore/>
         </SlideItem>
-      </SlideRowList>
+      </SlideHorizontal>
     </div>
   </div>
 </template>
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index 6ae6084..792678b 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -2,7 +2,6 @@ import globalMethods from "./index";
 import BaseHeader from "../components/BaseHeader";
 import SlideList from "../components/slide/SlideList";
 import SlideRowList from "../components/slide/SlideRowList";
-import SlideColumnList from "../components/slide/SlideColumnList";
 import SlideItem from "../components/slide/SlideItem";
 import Indicator from "../components/slide/Indicator";
 import Video from "../components/Video";
@@ -17,13 +16,14 @@ import Dom from "./dom";
 import bus, {EVENT_KEY} from "./bus";
 import {random} from "lodash";
 import {Icon} from '@iconify/vue'
+import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 
 export default {
   components: {
     BaseHeader,
+    SlideHorizontal,
     SlideList,
     SlideRowList,
-    SlideColumnList,
     SlideItem,
     Indicator,
     'Video1': Video,