From 39d2ddd575e0ef87d7aeba039d84dcf8a76d0a47 Mon Sep 17 00:00:00 2001
From: daofeng-1998 <53205232+daofeng-1998@users.noreply.github.com>
Date: Fri, 24 Feb 2023 14:01:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(noticebar):=20=E5=A2=9E=E5=8A=A0=E6=A8=AA?=
 =?UTF-8?q?=E5=90=91=E6=BB=9A=E5=8A=A8=E7=BB=93=E6=9D=9F=E6=97=B6=E5=9B=9E?=
 =?UTF-8?q?=E8=B0=83=E4=BA=8B=E4=BB=B6=20(#2130)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(noticebar): 增加横向滚动结束时回调事件

* feat(noticebar): noticebar横向滚动结束事件增加至taro端

---------

Co-authored-by: 刀锋 <wx2080969361@gmail.com>
---
 .../noticebar/__tests__/noticebar.spec.ts     | 10 +++++++
 src/packages/__VUE/noticebar/demo.vue         | 28 ++++++++++++++++---
 src/packages/__VUE/noticebar/doc.en-US.md     |  1 +
 src/packages/__VUE/noticebar/doc.md           |  3 +-
 src/packages/__VUE/noticebar/index.taro.vue   |  6 ++--
 src/packages/__VUE/noticebar/index.vue        |  6 ++--
 6 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/packages/__VUE/noticebar/__tests__/noticebar.spec.ts b/src/packages/__VUE/noticebar/__tests__/noticebar.spec.ts
index 10786888d..546dccc57 100644
--- a/src/packages/__VUE/noticebar/__tests__/noticebar.spec.ts
+++ b/src/packages/__VUE/noticebar/__tests__/noticebar.spec.ts
@@ -45,6 +45,16 @@ test('close event', async () => {
   expect(content.html()).toContain('123');
 });
 
+test('across-end event', async () => {
+  const wrapper = mount(NoticeBar, {
+    props: {
+      text: 'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。'
+    }
+  });
+  wrapper.vm.onAnimationEnd();
+  expect(wrapper.emitted('across-end')).toBeTruthy();
+});
+
 test('slot event', async () => {
   const wrapper = mount(NoticeBar, {
     slots: {
diff --git a/src/packages/__VUE/noticebar/demo.vue b/src/packages/__VUE/noticebar/demo.vue
index 2e3d85758..6528c4fe1 100644
--- a/src/packages/__VUE/noticebar/demo.vue
+++ b/src/packages/__VUE/noticebar/demo.vue
@@ -68,11 +68,19 @@
         </template>
       </nut-noticebar>
     </div>
+
+    <h2>{{ translate('scrollEvent') }}</h2>
+    <div class="interstroll-list">
+      <nut-noticebar
+        :text="`${translate('text')} - ${translate('scrollCount')}：[${acrossCount}]`"
+        @across-end="onAcrossEnd"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, toRefs } from 'vue';
+import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('noticebar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -91,7 +99,9 @@ const initTranslate = () =>
       text: 'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
       textShort: 'NutUI 是移动端组件库',
       horseLamp: ['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮'],
-      jd: '京东商城'
+      jd: '京东商城',
+      scrollCount: '滚动次数',
+      scrollEvent: '横向 - 滚动结束事件'
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -105,7 +115,9 @@ const initTranslate = () =>
       text: 'Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.',
       textShort: 'Nutui is a mobile terminal component library.',
       horseLamp: ['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox'],
-      jd: 'Jingdong'
+      jd: 'Jingdong',
+      scrollCount: 'scroll count',
+      scrollEvent: 'across - scrolling end event'
     }
   });
 
@@ -117,7 +129,8 @@ export default createDemo({
       horseLamp1: translate('horseLamp'),
       horseLamp2: translate('horseLamp'),
       horseLamp3: translate('horseLamp'),
-      text: translate('text')
+      text: translate('text'),
+      acrossCount: 0
     });
 
     const hello = () => {
@@ -127,10 +140,16 @@ export default createDemo({
       console.log(item);
     };
 
+    const onAcrossEnd = () => {
+      state.acrossCount++;
+      console.log('动画结束');
+    };
+
     return {
       ...toRefs(state),
       hello,
       go,
+      onAcrossEnd,
       translate
     };
   }
@@ -147,6 +166,7 @@ export default createDemo({
     color: $dark-color;
   }
 }
+
 .demo {
   padding-bottom: 30px !important;
 
diff --git a/src/packages/__VUE/noticebar/doc.en-US.md b/src/packages/__VUE/noticebar/doc.en-US.md
index 27c872b65..092306ade 100644
--- a/src/packages/__VUE/noticebar/doc.en-US.md
+++ b/src/packages/__VUE/noticebar/doc.en-US.md
@@ -254,3 +254,4 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 | ---------- | --------------------------------------- | ------------ |
 | click      | Emitted when NoticeBar is clicked       | event: Event |
 | close      | Emitted when NoticeBar is closed        | event: Event |
+| across-end | Emitted when across scrolling ends      | event: Event |
\ No newline at end of file
diff --git a/src/packages/__VUE/noticebar/doc.md b/src/packages/__VUE/noticebar/doc.md
index 0cde7e456..3965992a9 100644
--- a/src/packages/__VUE/noticebar/doc.md
+++ b/src/packages/__VUE/noticebar/doc.md
@@ -254,4 +254,5 @@ app.use(NoticeBar);
 | 字段  | 说明             | 回调参数     |
 | ----- | ---------------- | ------------ |
 | click | 外层点击事件回调 | event: Event |
-| close | 关闭通知栏时触发 | event: Event |
\ No newline at end of file
+| close | 关闭通知栏时触发 | event: Event |
+| across-end | 横向滚动结束时触发 | event: Event |
\ No newline at end of file
diff --git a/src/packages/__VUE/noticebar/index.taro.vue b/src/packages/__VUE/noticebar/index.taro.vue
index 68c4f3bda..b273b66c3 100644
--- a/src/packages/__VUE/noticebar/index.taro.vue
+++ b/src/packages/__VUE/noticebar/index.taro.vue
@@ -152,7 +152,7 @@ export default create({
       return h(props.item);
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'across-end'],
 
   setup(props, { emit, slots }) {
     // console.log('componentName', componentName);
@@ -308,9 +308,9 @@ export default create({
       emit('close', event);
     };
 
-    const onAnimationEnd = () => {
+    const onAnimationEnd = (event: Event) => {
       state.firstRound = false;
-
+      emit('across-end', event);
       setTimeout(() => {
         state.duration = (state.offsetWidth + state.wrapWidth) / props.speed;
         state.animationClass = 'play-infinite';
diff --git a/src/packages/__VUE/noticebar/index.vue b/src/packages/__VUE/noticebar/index.vue
index 7cc383818..d1833e0dc 100644
--- a/src/packages/__VUE/noticebar/index.vue
+++ b/src/packages/__VUE/noticebar/index.vue
@@ -163,7 +163,7 @@ export default create({
       return h(props.item);
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'across-end'],
 
   setup(props, { emit, slots }) {
     // console.log('componentName', componentName);
@@ -306,9 +306,9 @@ export default create({
       emit('close', event);
     };
 
-    const onAnimationEnd = () => {
+    const onAnimationEnd = (event: Event) => {
       state.firstRound = false;
-
+      emit('across-end', event);
       setTimeout(() => {
         state.duration = (state.offsetWidth + state.wrapWidth) / props.speed;
         state.animationClass = 'play-infinite';
-- 
GitLab