feat(scroll-view): add prop touch-angle

components/scroll-view/README.en-US.md

@@ -34,6 +34,7 @@ Vue.component(ScrollView.name, ScrollView)
 |manual-init | manual initialization | Boolean | `false` | generally used for asynchronous initialization scenarios, you need to manually call the `init` method to complete the initialization |
 |end-reached-threshold | threshold for emitting `endReached`. | Number | 0 | unit `px` |
 |immediate-check-end-reaching | check if it reaches the bottom at initialization | Boolean | `false` | - |
+|touch-angle | angle value range that triggers scrolling | Number | 45 | unit `deg` |
 
 #### ScrollViewRefresh Props
 |Props | Description | Type | Default | Note |

components/scroll-view/README.md

@@ -34,6 +34,7 @@ Vue.component(ScrollView.name, ScrollView)
 |manual-init | 手动初始化 | Boolean | `false` | 一般用于异步初始化的场景，需手动调用`init`方法完成初始化 |
 |end-reached-threshold | 触发到达底部的提前量 | Number | 0 | 单位`px` |
 |immediate-check-end-reaching | 初始化时立即触发是否到达底部检查 | Boolean | `false` | - |
+|touch-angle | 触发滚动的角度范围 | Number | 45 | 单位`deg` |
 
 #### ScrollViewRefresh Props
 |属性 | 说明 | 类型 | 默认值 | 备注|

components/scroll-view/index.vue

@@ -85,6 +85,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    touchAngle: {
+      type: Number,
+      default: 45,
+    },
   },
   data() {
     return {
@@ -101,6 +105,10 @@ export default {
       isEndReaching: false,
       scrollX: null,
       scrollY: null,
+      startX: 0,
+      startY: 0,
+      currentX: 0,
+      currentY: 0,
       containerW: 0,
       containerH: 0,
       contentW: 0,
@@ -218,13 +226,21 @@ export default {
         this.endReachedHandler()
       }
     },
+    $_getScrollerAngle() {
+      const diffX = this.currentX - this.startX
+      const diffY = this.currentY - this.startY
+      const angle = Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180 / Math.PI
+      return this.scrollingX ? 90 - angle : angle
+    },
     // MARK: events handler
     $_onScollerTouchStart(event) {
       // event.target.tagName && event.target.tagName.match(/input|textarea|select/i)
       /* istanbul ignore if */
       if (!this.scroller) {
         return
       }
+      this.startX = event.targetTouches[0].pageX
+      this.startY = event.targetTouches[0].pageY
       this.scroller.doTouchStart(event.touches, event.timeStamp)
     },
     $_onScollerTouchMove(event) {
@@ -233,6 +249,17 @@ export default {
         return
       }
       event.preventDefault()
+
+      this.currentX = event.targetTouches[0].pageX
+      this.currentY = event.targetTouches[0].pageY
+
+      if (!this.scrollingX || !this.scrollingY) {
+        const currentTouchAngle = this.$_getScrollerAngle()
+        if (currentTouchAngle < this.touchAngle) {
+          return
+        }
+      }
+
       this.scroller.doTouchMove(event.touches, event.timeStamp, event.scale)
     },
     $_onScollerTouchEnd(event) {
@@ -247,6 +274,8 @@ export default {
       if (!this.scroller) {
         return
       }
+      this.startX = event.pageX
+      this.startY = event.pageY
       this.scroller.doTouchStart(
         [
           {
@@ -263,6 +292,15 @@ export default {
       if (!this.scroller || !this.isMouseDown) {
         return
       }
+
+      this.currentX = event.pageX
+      this.currentY = event.pageY
+      if (!this.scrollingX || !this.scrollingY) {
+        const currentTouchAngle = this.$_getScrollerAngle()
+        if (currentTouchAngle < this.touchAngle) {
+          return
+        }
+      }
       this.scroller.doTouchMove(
         [
           {