优化slide

src/components/slide/SlideImgs.vue

@@ -22,6 +22,7 @@
 
 <script>
 import enums from "../../utils/enums";
+import globalMethods from '../../utils/global-methods'
 
 export default {
   name: "SlideImgs",
@@ -164,11 +165,11 @@ export default {
     this.cycleFn = () => {
       if (this.state !== 'play') return cancelAnimationFrame(this.cycleFn)
       if (this.progress < this.modelValue.imgs.length * 100) {
-        this.progress += .55
+        this.progress += .4
         this.index = parseInt(this.progress / 100)
         if (this.$refs.list) {
-          this.$setCss(this.$refs.list, 'transition-duration', `300ms`)
-          this.$setCss(this.$refs.list, 'transform',
+          globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
+          globalMethods.$setCss(this.$refs.list, 'transform',
               `translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
         }
       } else {
@@ -181,10 +182,12 @@ export default {
   },
   methods: {
     start(e) {
-      this.state = 'stop'
+      if (this.state !== 'custom') {
+        this.state = 'stop'
+      }
       if (e.touches && e.touches.length === 1) {
         this.isTwo = false
-        this.$setCss(this.$refs.list, 'transition-duration', `0ms`)
+        globalMethods.$setCss(this.$refs.list, 'transition-duration', `0ms`)
         this.startLocationX = e.touches[0].pageX
         this.startLocationY = e.touches[0].pageY
         this.startTime = Date.now()
@@ -217,7 +220,7 @@ export default {
         if (this.index === 0 && !this.isDrawRight) return
         if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
 
-        this.$setCss(this.$refs.list, 'transform',
+        globalMethods.$setCss(this.$refs.list, 'transform',
             `translate3d(${-this.getWidth(this.index) +
             this.moveXDistance}px, 0px, 0px)`)
       } else {
@@ -247,15 +250,14 @@ export default {
         this.store.scale = 1
         this.itemRefs[this.index].style['transition-duration'] = '300ms';
         this.itemRefs[this.index].style.transform = 'scale(' + 1 + ')';
-      } else {
-        if (Date.now() - this.startTime < 40 && Math.abs(this.moveXDistance) < 10) {
-
+        if (this.state !== 'custom') {
+          this.state = 'play'
         }
-
+      } else {
         if (this.index === 0 && !this.isDrawRight) return
         if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
 
-        let canSlide = this.width / 8 < Math.abs(this.moveXDistance) && Math.abs(this.moveXDistance) > 40;
+        let canSlide = this.width / 5 < Math.abs(this.moveXDistance);
         if (Date.now() - this.startTime < 40) canSlide = false
 
         if (canSlide) {
@@ -266,9 +268,13 @@ export default {
           }
           this.state = 'custom'
           this.progress = (this.index + 1) * 100
+        } else {
+          if (this.state !== 'custom') {
+            this.state = 'play'
+          }
         }
-        this.$setCss(this.$refs.list, 'transition-duration', `300ms`)
-        this.$setCss(this.$refs.list, 'transform',
+        globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`)
+        globalMethods.$setCss(this.$refs.list, 'transform',
             `translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`)
       }
     },

src/pages/test/TestSlide.vue

@@ -28,6 +28,7 @@
 import Slide from "./slide.jsx";
 import SlideVideo from "../../components/slide/SlideVideo";
 import SlideUser from "../../components/slide/SlideUser";
+import SlideImgs from "../../components/slide/SlideImgs";
 import resource from "../../assets/data/resource.js";
 import CONST_VAR from "../../utils/const_var";
 import Dom from "../../utils/dom";
@@ -68,6 +69,10 @@ export default {
         type: 'img',
         src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
       })
+      list.unshift({
+        type: 'imgs',
+        src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+      })
       list.unshift({
         type: 'send-video',
         src: `http://douyin.ttentau.top/0.mp4`
@@ -280,6 +285,9 @@ export default {
         if (item.type === 'img') {
           html = <img src={item.src} style="height:100%;"/>
         }
+        if (item.type === 'imgs') {
+          html = <SlideImgs />
+        }
         if (item.type === 'send-video') {
           html = <video src={item.src} style="height:100%;"/>
         }

src/utils/global-methods.jsx

@@ -220,19 +220,6 @@ export default {
   $console(v) {
     return console.log(JSON.stringify(v, null, 4))
   },
-  $randomNum(minNum, maxNum) {
-    switch (arguments.length) {
-      case 1:
-        return parseInt(Math.random() * minNum + 1, 10);
-        break;
-      case 2:
-        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
-        break;
-      default:
-        return 0;
-        break;
-    }
-  },
   $sleep(duration) {
     return new Promise((resolve, reject) => {
       setTimeout(resolve, duration)
@@ -375,4 +362,4 @@ export default {
         return 0;
     }
   },
-}
+}