优化slide

package.json

@@ -7,24 +7,24 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@jambonn/vue-lazyload": "1.0.8",
+    "@jambonn/vue-lazyload": "1.0.9",
-    "axios": "0.21.1",
+    "axios": "0.26.1",
-    "core-js": "3.6.5",
+    "core-js": "3.21.1",
-    "dayjs": "1.10.6",
+    "dayjs": "1.11.0",
     "lodash": "4.17.21",
-    "mitt": "2.1.0",
+    "mitt": "3.0.0",
     "mockjs": "1.1.0",
-    "pinyin": "2.9.0",
+    "pinyin": "2.11.1",
-    "vue": "3.2.16",
+    "vue": "3.2.31",
-    "vue-router": "4.0.8",
+    "vue-router": "4.0.14",
     "vue-switches": "2.0.1",
-    "vuex": "4.0.1"
+    "vuex": "4.0.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "1.9.3",
+    "@vitejs/plugin-vue": "2.2.4",
-    "@vitejs/plugin-vue-jsx": "1.2.0",
+    "@vitejs/plugin-vue-jsx": "1.3.8",
     "less": "^4.1.2",
     "mobile-select": "1.1.2",
-    "vite": "2.8.5"
+    "vite": "2.8.6"
   }
 }

src/pages/slide/IndicatorHome.vue

@@ -1,20 +1,24 @@
 <template>
   <div class="indicator-home">
+    <transition name="fade">
+      <div class="mask" v-if="open" @click="open = false"></div>
+    </transition>
     <div class="notice"><span>下拉刷新内容</span></div>
     <div class="toolbar" ref="toolbar">
       <div class="left" @click="$nav('/home/live')">直播</div>
       <div class="tab-ctn">
         <div class="tabs" ref="tabs">
-          <div class="tab"
+          <div class="tab" :class="tabOneClass"
-               @click.stop="changeIndex(0)">
+               @click.stop="change(0)">
             <span>同城</span>
+            <img src="../../assets/img/icon/arrow-up-white.png" alt="">
           </div>
-          <div class="tab"
+          <div class="tab" :class="{active:index === 1}"
-               @click.stop="changeIndex(1)">
+               @click.stop="change(1)">
             <span>关注</span>
           </div>
-          <div class="tab"
+          <div class="tab" :class="{active:index === 2}"
-               @click.stop="changeIndex(2)"><span>推荐</span>
+               @click.stop="change(2)"><span>推荐</span>
           </div>
         </div>
         <div class="indicator" ref="indicator"></div>
@@ -23,6 +27,14 @@
            @click="$nav('/home/search')"
            style="margin-top: .5rem;">
     </div>
+    <div class="toggle-type" :class="{open}">
+      <div class="l-button active">
+        <span>同城</span>
+        <img src="../../assets/img/icon/switch.png" alt="">
+      </div>
+      <div class="l-button">学习</div>
+    </div>
+
     <Loading class="loading" style="width: 4rem;" :is-full-screen="false"/>
   </div>
 </template>
@@ -51,20 +63,32 @@ export default {
     return {
       indicatorRef: null,
       lefts: [],
-      indicatorSpace: 0
+      indicatorSpace: 0,
+      open: false
     }
   },
-  computed: {},
+  computed: {
-  watch: {},
+    tabOneClass() {
+      return {active: this.index === 0, open: this.open}
+    }
+  },
+  watch: {
+    // index(newVal) {
+    //   this.end()
+    // }
+  },
   created() {
   },
   mounted() {
     this.initTabs()
-    bus.on(this.name + '-moved', this.move)
+    bus.on(this.name + '-move', this.move)
     bus.on(this.name + '-end', this.end)
   },
   methods: {
-    changeIndex(index) {
+    change(index) {
+      if (this.index === 0 && index === 0) {
+        this.open = !this.open
+      }
       this.$emit('update:index', index)
       this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
       this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
@@ -84,36 +108,36 @@ export default {
       this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
     },
     move(e) {
-      console.log('move', e)
+      this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
-
       this.$setCss(this.indicatorRef, 'left',
           this.lefts[this.index] -
           e.x.distance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
     },
     end(index) {
-      console.log(index)
       this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-      this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
+      this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
       setTimeout(() => {
         this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
       }, 300)
     }
-  }
+  },
 }
 </script>
 
 <style scoped lang="less">
 @import "@/assets/less/index";
 
+@height: 6rem;
+
 .indicator-home {
   position: fixed;
   font-size: 1.6rem;
   top: 0;
   left: 0;
-  height: 60px;
   z-index: 2;
   width: 100%;
   color: white;
+  height: @height;
 
   .notice {
     opacity: 0;
@@ -156,7 +180,21 @@ export default {
 
         .tab {
           transition: color .3s;
-          color: gray;
+          color: rgb(156, 158, 165);
+
+          img {
+            @width: 1rem;
+            width: @width;
+            height: @width;
+            margin-left: .4rem;
+            transition: all .3s;
+          }
+
+          &.open {
+            img {
+              transform: rotate(180deg);
+            }
+          }
 
           &.active {
             color: white;
@@ -169,13 +207,70 @@ export default {
         //transition: left .3s;
         position: absolute;
         bottom: -0.8rem;
-        height: .3rem;
+        height: .2rem;
         width: 2rem;
         background: #fff;
         border-radius: .5rem;
       }
     }
   }
+
+  .toggle-type {
+    @height: 10rem;
+    position: absolute;
+    height: @height;
+    //padding-top: @height;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    width: 100%;
+    background: @main-bg;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    box-sizing: border-box;
+    font-size: 1.2rem;
+    top: -@height;
+    transition: all .3s;
+    opacity: 0;
+
+    &.open {
+      top: 0;
+      opacity: 1;
+    }
+
+    .l-button {
+      width: 49%;
+      height: 2.8rem;
+      background: rgb(33, 36, 45);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 2rem;
+      color: rgb(157, 161, 170);
+
+      &.active {
+        background: rgb(57, 57, 65);
+        color: white;
+      }
+
+      img {
+        @width: .9rem;
+        width: @width;
+        height: @width;
+        margin-left: .8rem;
+      }
+    }
+
+  }
+
+  .mask {
+    top: 0;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    background: #00000066;
+  }
 }
 
 </style>

src/pages/slide/Slide.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="Slide" @click="checkDbClick">
-    <slide-horizontal>
+    <SlideHorizontal>
       <div class="item">
         <IndicatorHome
             name="main"
             v-model:index="index"
         />
-        <slide-horizontal
+        <SlideHorizontal
             name="main"
             v-model:index="index"
             style="height: calc(100% - 5rem);"
@@ -73,19 +73,19 @@
               <div class="item">r333333333333333333333333333333333333333333333333333333</div>
             </SlideVertical>
           </div>
-        </slide-horizontal>
+        </SlideHorizontal>
         <Footer v-bind:init-tab="1"/>
       </div>
       <div class="item">
         <p v-for="i in 100">2</p>
       </div>
-    </slide-horizontal>
+    </SlideHorizontal>
   </div>
 </template>
 
 <script>
-import SlideHorizontal from './slide-horizontal'
+import SlideHorizontal from './SlideHorizontal'
-import SlideVertical from './slide-vertical'
+import SlideVertical from './SlideVertical'
 import BVideo from "../../components/BVideo";
 import resource from "../../assets/data/resource";
 import Dom from "../../utils/dom";
@@ -121,6 +121,7 @@ export default {
     ...mapState(['friends']),
   },
   created() {
+    console.log(this.$router)
     this.getData()
   },
   mounted() {

src/pages/slide/SlideHorizontal.vue

@@ -2,17 +2,21 @@
 import bus from "../../utils/bus";
 
 export default {
-  props:{
+  props: {
     name: {
       type: String,
       default: () => ''
     },
+    index: {
+      type: Number,
+      default: () => 0
+    },
   },
   data() {
     return {
       wrapper: null,
       total: 0,
-      index: 0,
+      lIndex: 0,
       wrapperWidth: 0,
       wrapperHeight: 0,
       moveX: 0,
@@ -30,6 +34,14 @@ export default {
     this.wrapperWidth = this.$getCss(this.wrapper, 'width')
     this.wrapperHeight = this.$getCss(this.wrapper, 'height')
   },
+  watch: {
+    index(newVal) {
+      this.lIndex = newVal
+      this.$setCss(this.wrapper, 'transition-duration', `300ms`)
+      this.$setCss(this.wrapper, 'transform',
+          `translate3d(${this.getDistance()}px, 0, 0)`)
+    }
+  },
   methods: {
     touchStart(e) {
       this.$setCss(this.wrapper, 'transition-duration', `0ms`)
@@ -41,13 +53,13 @@ export default {
       this.moveY = e.touches[0].pageY - this.startY
 
       let isRight = this.moveX < 0
-      if ((this.index === 0 && !isRight) || (this.index === this.total - 1 && isRight)) return
+      if ((this.lIndex === 0 && !isRight) || (this.lIndex === this.total - 1 && isRight)) return
 
 
       this.checkDirection(e)
 
       if (this.next) {
-        bus.emit(this.name + '-moved', {
+        bus.emit(this.name + '-move', {
           x: {distance: this.moveX, isRight},
         })
         this.$stopPropagation(e)
@@ -76,22 +88,23 @@ export default {
     touchEnd(e) {
       let isRight = this.moveX < 0
       let next = true
-      if ((this.index === 0 && !isRight) || (this.index === this.total - 1 && isRight)) next = false
+      if ((this.lIndex === 0 && !isRight) || (this.lIndex === this.total - 1 && isRight)) next = false
 
       if (Math.abs(this.moveX) > (this.wrapperWidth / 4) && next) {
         if (isRight) {
-          this.index++
+          this.lIndex++
         } else {
-          this.index--
+          this.lIndex--
         }
       }
       this.$setCss(this.wrapper, 'transition-duration', `300ms`)
       this.$setCss(this.wrapper, 'transform',
           `translate3d(${this.getDistance()}px, 0, 0)`)
 
-      this.$attrs['onUpdate:index'] && this.$emit('update:index', this.index)
+      this.$emit('update:index', this.lIndex)
 
       this.reset()
+      bus.emit(this.name + '-end', this.lIndex)
     },
     reset() {
       this.moveX = 0
@@ -99,7 +112,7 @@ export default {
       this.needCheck = true
     },
     getDistance() {
-      return -this.index * this.wrapperWidth
+      return -this.lIndex * this.wrapperWidth
     },
   },
 

src/router/routes.js

@@ -72,7 +72,7 @@ import Help from "../pages/login/Help";
 import Uploader from "../pages/me/Uploader";
 import TestSlide from "../pages/test/TestSlide";
 import TestOne from "../pages/test/TestOne";
-import Slide from "../pages/slide/slide";
+import Slide from "../pages/slide/Slide";
 
 const routes = [
   {