💬 will add left/right scroll a few day

chenxuan · chenxuan · commit f160bfdff92f · 2018-01-17T12:01:01.000+08:00
近期增加左右无缝滚动配置
diff --git a/README.md b/README.md
@@ -80,6 +80,7 @@ Example:
 ```
 
 ## Care
+I will add left and right seamless scroll in the near future.
 I will create a js seamless scrolling plug-in project in the near future.
 
 ## License
diff --git a/dist/vue-seamless-scroll.js b/dist/vue-seamless-scroll.js
@@ -310,6 +310,7 @@ var arrayEqual = __webpack_require__(42);
 exports.default = {
   data: function data() {
     return {
+      xPos: 0,
       yPos: 0,
       delay: 0,
       copyHtml: '',
@@ -329,7 +330,7 @@ exports.default = {
   },
   computed: {
     pos: function pos() {
-      return { transform: 'translate(0,' + this.yPos + 'px)', transition: 'all ease-in ' + this.delay + 'ms' };
+      return { transform: 'translate(' + this.xPos + 'px,' + this.yPos + 'px)', transition: 'all ease-in ' + this.delay + 'ms' };
     },
     defaultOption: function defaultOption() {
       return {
@@ -376,8 +377,8 @@ exports.default = {
         x: touch.pageX - this.startPos.x,
         y: touch.pageY - this.startPos.y
       };
-      var direction = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0;
-      if (direction === 1) {
+      var dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0;
+      if (dir === 1) {
         event.preventDefault();
         this.yPos = this.startPosY + this.endPos.y;
       }
@@ -419,12 +420,9 @@ exports.default = {
           if (Math.abs(this.yPos) >= h) {
             this.yPos = 0;
           }
-        } else {
-          if (this.yPos >= 0) this.yPos = h * -1;
-        }
-        if (direction === 1) {
           this.yPos -= this.options.step;
         } else {
+          if (this.yPos >= 0) this.yPos = h * -1;
           this.yPos += this.options.step;
         }
         if (!!this.options.singleHeight) {
diff --git a/dist/vue-seamless-scroll.min.js b/dist/vue-seamless-scroll.min.js
diff --git a/document/README.md b/document/README.md
@@ -80,6 +80,7 @@ Example:
 ```
 
 ## 注意
+我将会近期增加左右滚动配置
 我将会在近期创建一个js无缝滚动插件项目。
 
 ## License
diff --git a/examples/examples.bundle.js b/examples/examples.bundle.js
diff --git a/src/components/myClass.vue b/src/components/myClass.vue
@@ -14,6 +14,7 @@
   export default {
     data () {
       return {
+        xPos: 0,
         yPos: 0,
         delay: 0,
         copyHtml: '',
@@ -32,14 +33,14 @@
     },
     computed: {
       pos () {
-        return {transform: `translate(0,${this.yPos}px)`, transition: `all ease-in ${this.delay}ms`}
+        return {transform: `translate(${this.xPos}px,${this.yPos}px)`, transition: `all ease-in ${this.delay}ms`}
       },
       defaultOption () {
         return {
           step: 1, //步长
           limitMoveNum: 5, //启动无缝滚动最小数据数
           hoverStop: true, //是否启用鼠标hover控制
-          direction: 1, //1 往上 0 往下
+          direction: 1, // 0 往下 1 往上
           openWatch: true, //开启data实时监听
           singleHeight: 0, //单条数据高度有值hoverStop关闭
           waitTime: 1000 //单步停止等待时间
@@ -79,8 +80,8 @@
           x: touch.pageX - this.startPos.x,
           y: touch.pageY - this.startPos.y
         }
-        let direction = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0 //direction，1表示纵向滑动，0为横向滑动
-        if (direction === 1) {
+        let dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0 //direction，1表示纵向滑动，0为横向滑动
+        if (dir === 1) {
           event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
           this.yPos = this.startPosY + this.endPos.y
         }
@@ -119,12 +120,9 @@
               if (Math.abs(this.yPos) >= h) {
                 this.yPos = 0
               }
-            } else {
-              if (this.yPos >= 0) this.yPos = h * -1
-            }
-            if (direction === 1) {
               this.yPos -= this.options.step
             } else {
+              if (this.yPos >= 0) this.yPos = h * -1
               this.yPos += this.options.step
             }
             if (!!this.options.singleHeight) { //是否启动了单行暂停配置
