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

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

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

---------
Co-authored-by: 刀锋 <wx2080969361@gmail.com>

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: {

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;
 

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

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

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';

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';