优化

package.json

@@ -7,7 +7,6 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "3.2.16",
     "@jambonn/vue-lazyload": "1.0.8",
     "axios": "0.21.1",
     "core-js": "3.6.5",
@@ -16,6 +15,7 @@
     "mitt": "2.1.0",
     "mockjs": "1.1.0",
     "pinyin": "2.9.0",
+    "vue": "3.2.16",
     "vue-router": "4.0.8",
     "vue-switches": "2.0.1",
     "vuex": "4.0.1"
@@ -23,9 +23,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "1.9.3",
     "@vitejs/plugin-vue-jsx": "1.2.0",
-    "vite": "2.6.4",
-    "less": "4.1.1",
-    "less-loader": "7.0.0",
-    "mobile-select": "1.1.2"
+    "less": "^4.1.2",
+    "mobile-select": "1.1.2",
+    "vite": "2.8.5"
   }
 }

src/components/slide/SlideRowList.vue

@@ -189,7 +189,7 @@ export default {
         this.tabIndicatorRelationActiveIndexLefts.push(
             item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.isHome ? this.tabWidth * 0.15 : 0))
       }
-      // console.log(this.indicatorRelateIndexLefts)
+      // console.log(this.lefts)
       this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
       if (this.isHome) {
         this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)

src/pages/slide/IndicatorHome.vue

@@ -6,16 +6,15 @@
       <div class="tab-ctn">
         <div class="tabs" ref="tabs">
           <div class="tab"
-               @click="changeIndex(false,0)">
+               @click.stop="changeIndex(0)">
             <span>同城</span>
           </div>
           <div class="tab"
-
-               @click="changeIndex(false,0)">
+               @click.stop="changeIndex(1)">
             <span>关注</span>
           </div>
           <div class="tab"
-               @click="changeIndex(false,1)"><span>推荐</span>
+               @click.stop="changeIndex(2)"><span>推荐</span>
           </div>
         </div>
         <div class="indicator" ref="indicator"></div>
@@ -29,6 +28,7 @@
 </template>
 <script>
 import Loading from "../../components/Loading";
+import bus from "../../utils/bus";
 
 export default {
   name: "IndicatorHome",
@@ -36,13 +36,21 @@ export default {
     Loading,
   },
   props: {
-    modelValue: false
+    modelValue: false,
+    //用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
+    name: {
+      type: String,
+      default: () => ''
+    },
+    index: {
+      type: Number,
+      default: () => 0
+    },
   },
   data() {
     return {
-      tabWidth: 0,
       indicatorRef: null,
-      indicatorRelateIndexLefts: [],
+      lefts: [],
       indicatorSpace: 0
     }
   },
@@ -51,23 +59,44 @@ export default {
   created() {
   },
   mounted() {
-    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')
-      //TODO 这里算得不对，两个字时正常，字一多就会出问题，修改参考IndicatorLight.vue
-      this.indicatorRelateIndexLefts.push(
-          item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + this.tabWidth * 0.15)
-    }
-    this.indicatorSpace = this.indicatorRelateIndexLefts[1] - this.indicatorRelateIndexLefts[0]
-    this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-    this.$setCss(this.indicatorRef, 'left', this.indicatorRelateIndexLefts[0] + 'px')
-
+    this.initTabs()
+    bus.on(this.name + '-moved', this.move)
+    bus.on(this.name + '-end', this.end)
   },
   methods: {
-    changeIndex() {
+    changeIndex(index) {
+      this.$emit('update:index', index)
+      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
+      this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
+    },
+    initTabs() {
+      let tabs = this.$refs.tabs
+      this.indicatorRef = this.$refs.indicator
+      let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
+      for (let i = 0; i < tabs.children.length; i++) {
+        let item = tabs.children[i]
+        let tabWidth = this.$getCss(item, 'width')
+        this.lefts.push(
+            item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (tabWidth * 0.5 - indicatorWidth / 2))
+      }
+      this.indicatorSpace = this.lefts[1] - this.lefts[this.index]
+      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
+      this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
+    },
+    move(e) {
+      console.log('move', e)
 
+      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')
+      setTimeout(() => {
+        this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
+      }, 300)
     }
   }
 }

src/pages/slide/Slide-Horizontal.vue

@@ -1,5 +1,13 @@
 <script lang="jsx">
+import bus from "../../utils/bus";
+
 export default {
+  props:{
+    name: {
+      type: String,
+      default: () => ''
+    },
+  },
   data() {
     return {
       wrapper: null,
@@ -35,9 +43,13 @@ export default {
       let isRight = this.moveX < 0
       if ((this.index === 0 && !isRight) || (this.index === this.total - 1 && isRight)) return
 
+
       this.checkDirection(e)
 
       if (this.next) {
+        bus.emit(this.name + '-moved', {
+          x: {distance: this.moveX, isRight},
+        })
         this.$stopPropagation(e)
         this.$setCss(this.wrapper, 'transform',
             `translate3d(${this.getDistance()

src/pages/slide/Slide.vue

@@ -2,8 +2,12 @@
   <div id="Slide" @click="checkDbClick">
     <slide-horizontal>
       <div class="item">
-        <IndicatorHome/>
+        <IndicatorHome
+            name="main"
+            v-model:index="index"
+        />
         <slide-horizontal
+            name="main"
             v-model:index="index"
             style="height: calc(100% - 5rem);"
         >