feat(vue-native-components): added stateChanged event handler to swiper

Tencent · Mar 11, 2020 · 71760cc · 71760cc
1 parent 516fa98
commit 71760cc
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/docs/hippy-vue/external-components.md b/docs/hippy-vue/external-components.md
@@ -72,6 +72,12 @@
 | ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
 | dragging                | 拖动时触发。                            | `Function`                                                   | `ALL`    |
 | dropped   | 拖拽松手时触发，就是确定了滚动的页面时触发。                                                            | `Function`                                                   | `ALL`    |
+| stateChanged*   | 手指行为发生改变时触发，包含了 idle、dragging、settling 三种状态，通过 state 参数返回                                                             | `Function`                                                   | `ALL`    |
+
+* stateChanged 三种值的意思：
+  * idle 空闲状态
+  * dragging 拖拽中
+  * settling 松手后触发，然后马上回到 idle
 
 # swiper-slide
 

diff --git a/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue b/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue
@@ -7,7 +7,8 @@
       <button class="toolbar-btn" @click="scrollToNextPage">
         <span>翻到下一页</span>
       </button>
-      <p class="toolbar-text">当前第 {{ currentSlideNum + 1 }} 页</p>
+      <p class="toolbar-text">当前第 {{ currentSlideNum + 1 }} 页，</p>
+      <p class="toolbar-text">滚屏状态：{{ state }}</p>
     </div>
     <!--
       swiper 组件参数
@@ -22,7 +23,8 @@
       needAnimation
       :current="currentSlide"
       @dragging="onDragging"
-      @dropped="onDropped">
+      @dropped="onDropped"
+      @stateChanged="onStateChanged">
       <!-- slides -->
       <swiper-slide
         v-for="n in dataSource"
@@ -63,6 +65,8 @@ export default {
       // 所以这里单独做个变量，保存当前正在显示的值，跟 currentSlide 的值做个区分，避免推拉现象。
       currentSlideNum: 2,
 
+      // 设置默认滚屏状态
+      state: 'idle',
     };
   },
   mounted() {
@@ -92,6 +96,10 @@ export default {
       // 更细当前页码
       this.currentSlideNum = evt.currentSlide;
     },
+    onStateChanged(evt) {
+      // 更新当前滚屏状态
+      this.state = evt.state;
+    },
   },
 };
 </script>

diff --git a/packages/hippy-react/src/components/view-pager.tsx b/packages/hippy-react/src/components/view-pager.tsx
@@ -57,7 +57,7 @@ interface ViewPagerProps {
    * @param {string} str - Page scroll state event data
    * This can be one of the following values:
    *
-   * * idel
+   * * idle
    * * dragging
    * * settling
    */

diff --git a/packages/hippy-vue-native-components/src/swiper.js b/packages/hippy-vue-native-components/src/swiper.js
@@ -15,6 +15,9 @@ function registerSwiper(Vue) {
             event.nextSlide = nativeEventParams.position;
             event.offset = nativeEventParams.offset;
             break;
+          case 'onPageScrollStateChanged':
+            event.state = nativeEventParams.pageScrollState;
+            break;
           default:
         }
         return event;
@@ -65,6 +68,10 @@ function registerSwiper(Vue) {
       onPageSelected(evt) {
         this.$emit('dropped', evt);
       },
+      // On page scroll state changed.
+      onPageScrollStateChanged(evt) {
+        this.$emit('stateChanged', evt);
+      },
     },
     watch: {
       current(to) {
@@ -79,6 +86,7 @@ function registerSwiper(Vue) {
       const on = getEventRedirector.call(this, [
         ['dropped', 'pageSelected'],
         ['dragging', 'pageScroll'],
+        ['stateChanged', 'pageScrollStateChanged'],
       ]);
       return h('hi-swiper', {
         on,