学习平台-tab滑动切换组件修改

src/views/learningPlatform/tabSwitch/index.vue

@@ -3,8 +3,7 @@
     <div class="switch">
       <div v-for="(item, index) in list" :key="index" @mouseover="mouseover(item,index)" @mouseleave="mouseleave(item,index)">
         <div :class="item.color">
-          <div class="solid" v-if="index !== 0"></div>
-          <div :class="index !== 0 ? 'elementTwo' : 'element'">
+          <div :class="index === 0 ? 'elementTwo' : 'element'">
             <div class="child"></div>
           </div>
           <div :class="index !== 0 ? 'textTwo' : 'text'">{{ item.name }}</div>
@@ -13,7 +12,7 @@
       </div>
     </div>
     <div class="app-wrapper">
-      <!-- 文本超出，左右按钮滚动 -->
+      <!-- 文本超出，左右滚动 -->
       <div id="click-scroll-X">
         <div class="scroll_wrapper" ref="wrapperCon">
           <div class="scroll_list">
@@ -28,6 +27,7 @@
 </template>
 <script>
 import 'swiper/css/swiper.min.css'
+
 export default {
   name: 'Index',
   data() {
@@ -36,28 +36,28 @@ export default {
       timer: null, // 定时器（方便清除）
       classify: [
         { img: require('@/assets/image/xuexiTab1.png') },
-        { img: require('@/assets/image/xuexiTab1.png') },
-        { img: require('@/assets/image/xuexiTab1.png') },
-        { img: require('@/assets/image/xuexiTab1.png') }
+        { img: require('@/assets/image/xuexiTab2.png') },
+        { img: require('@/assets/image/xuexiTab3.png') },
+        { img: require('@/assets/image/xuexiTab4.png') }
       ],
       list: [
         {
-          name: 'name1',
+          name: '学习行为监测',
           id: 1,
           color: 'blue'
         },
         {
-          name: 'name2',
+          name: '数据分析服务',
           id: 2,
           color: 'grey'
         },
         {
-          name: 'name3',
+          name: '角色管理服务',
           id: 3,
           color: 'grey'
         },
         {
-          name: 'name4',
+          name: '课程推荐服务',
           id: 4,
           color: 'grey'
         }
@@ -71,7 +71,8 @@ export default {
         if (oldVal !== '') {
           if (newVal > oldVal) {
             const difference = newVal - oldVal
-            this.rightSlide(difference)
+            this.rightSlide(difference, newVal)
+            console.log('difference', difference)
           } else if (newVal < oldVal) {
             const difference = oldVal - this.value
             this.leftSlide(difference)
@@ -85,15 +86,16 @@ export default {
     leftSlide(difference) {
       // 保存滚动盒子左侧已滚动的距离
       let left = this.$refs.wrapperCon.scrollLeft
+      console.log('left', left)
       let num = 0
-      clearInterval(this.timer)
+      // clearInterval(this.timer)
       this.timer = null
       this.timer = setInterval(() => {
         //   !left:已经滚动到最左侧
         //   一次性滚动距离1091（可调节）
         if (!left || num >= difference * 1091) {
           // 停止滚动
-          clearInterval(this.timer)
+          // clearInterval(this.timer)
           this.timer = null
           return
         }
@@ -101,33 +103,36 @@ export default {
         this.$refs.wrapperCon.scrollLeft = left -= 30
         // 保存向左滚动距离（方便判断一次性滚动多少距离）
         num += 30
-      }, 20)
-      // 20：速度（可调节）
+      }, 0)
+      // 10：速度（可调节）
     },
     // 右移动
     rightSlide(difference) {
       // 保存滚动盒子左侧已滚动的距离
       let left = this.$refs.wrapperCon.scrollLeft
+      console.log('right', left)
       // 保存元素的整体宽度
       const scrollWidth = this.$refs.wrapperCon.scrollWidth
+      console.log('scrollWidth', scrollWidth)
       // 保存元素的可见宽度
       const clientWidth = this.$refs.wrapperCon.clientWidth
+      console.log('clientWidth', clientWidth)
       let num = 0
-      clearInterval(this.timer)
+      // clearInterval(this.timer)
       this.timer = setInterval(() => {
         // 已经滚动距离+可见宽度
         // left+clientWidth>=scrollWidth：滚动到最右侧
         // num>=1091一次性滚动距离
         if (left + clientWidth >= scrollWidth || num >= difference * 1091) {
-          clearInterval(this.timer)
+          // clearInterval(this.timer)
           return
         }
         // 给滚动盒子元素赋值向左滚动距离
         this.$refs.wrapperCon.scrollLeft = left += 30
         // 保存向左滚动距离（方便判断一次性滚动多少距离）
         num += 30
-      }, 20)
-      // 20：速度（可调节）
+      }, 0)
+      // 10：速度（可调节）
     },
     mouseover(item, index) {
       this.value = index
@@ -156,16 +161,18 @@ export default {
   justify-content: center;
   align-items: center;
   .switch {
+    margin-left: 125px;
     display: flex;
     justify-content: center;
     height: 100px;
     width: 1920px;
     .grey {
       cursor: pointer;
-      width: 260px;
+      width: 340px;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      //justify-content: space-between;
+      flex-direction: row;
       .element{
         width: 30px;
         height: 30px;
@@ -186,7 +193,6 @@ export default {
         font-size: 24px;
       }
       .elementTwo {
-        margin-left: 25px;
         width: 30px;
         height: 30px;
         border-radius: 50%;
@@ -202,21 +208,22 @@ export default {
         }
       }
       .textTwo {
-        margin-right: 25px;
         color: #ddd;
         font-size: 24px;
       }
       .solid {
+        margin: 0 25px;
         border: 0.5px solid #ddd;
-        width: 50px
+        width: 100px
       }
     }
     .blue {
       cursor: pointer;
-    width: 260px;
+      width: 340px;
       display: flex;
       align-items: center;
-    justify-content: space-between;
+      //justify-content: space-between;
+      flex-direction: row;
       .element{
         width: 30px;
         height: 30px;
@@ -237,7 +244,6 @@ export default {
         font-size: 24px;
       }
       .elementTwo {
-      margin-left: 25px;
         width: 30px;
         height: 30px;
         border-radius: 50%;
@@ -253,13 +259,13 @@ export default {
         }
       }
       .textTwo {
-      margin-right: 25px;
         color: #00aeff;
         font-size: 24px;
       }
       .solid {
+        margin: 0 25px;
         border: 0.5px solid #ddd;
-      width: 50px
+        width: 100px
       }
     }
 
@@ -297,7 +303,6 @@ export default {
           display: flex;
           align-items: center;
           justify-content: center;
-          border: 1px solid #ccc;
           border-radius: 3px;
           box-sizing: border-box;
           flex-shrink: 0;