fix(noticebar): children cannot update responsively in vertical mode (#3251)

* fix(noticebar): first item is not visible when scrolling vertically

* fix(noticebar): children cannot update responsively in vertical mode

---------

Co-authored-by: songsong <[email protected]>

Author: mingquan5830

src/packages/noticebar/__test__/noticebar.spec.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useState } from 'react'
 import { render, fireEvent, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { Fabulous } from '@nutui/icons-react'
@@ -260,3 +261,94 @@ test('vertical container height calculation with children', async () => {
     { timeout: 3000 }
   )
 })
+
+test('dynamic children update test', async () => {
+  let setList: any
+  const height = 40
+
+  const TestComponent = () => {
+    const [list, updateList] = useState(['原始项目1', '原始项目2', '原始项目3'])
+    setList = updateList
+
+    return (
+      <NoticeBar direction="vertical" height={height} speed={10} duration={500}>
+        {list.map((item, index) => (
+          <div
+            className="custom-item"
+            style={{ height: `${height}px`, lineHeight: `${height}px` }}
+            key={index}
+          >
+            {item}
+          </div>
+        ))}
+      </NoticeBar>
+    )
+  }
+
+  const { container } = render(<TestComponent />)
+
+  // 等待初始渲染完成
+  await waitFor(() => {
+    const wrapElement = container.querySelector('.nut-noticebar-box-wrap')
+    expect(wrapElement).toHaveStyle('height: 160px') // (3 + 1) * 40
+
+    // 1. 初始时容器的垂直位移为0（显示第一项）
+    expect(wrapElement).toHaveStyle('transform: translate3D(0,0px,0)')
+
+    const items = container.querySelectorAll('.custom-item')
+    expect(items).toHaveLength(3)
+    expect(items[0]).toHaveTextContent('原始项目1')
+  })
+
+  // 等待轮播进行一段时间，确保当前不是第一项
+  await waitFor(
+    () => {
+      const wrapElement = container.querySelector('.nut-noticebar-box-wrap')
+      const transform = wrapElement
+        ?.getAttribute('style')
+        ?.match(/transform:\s*translate3D\(([^,]+),([^,]+),([^)]+)\)/)
+      const yOffset = transform ? transform[2].trim() : '0px'
+
+      // 验证已经轮播到非第一项（垂直偏移不为0）
+      expect(yOffset).not.toBe('0px')
+    },
+    { timeout: 2000 }
+  ) // 给足够时间让轮播发生
+
+  // 变更列表数据
+  act(() => {
+    setList(['新项目A', '新项目B', '新项目C', '新项目D'])
+  })
+
+  await waitFor(() => {
+    // 验证容器高度更新为新的计算值
+    const wrapElement = container.querySelector('.nut-noticebar-box-wrap')
+    expect(wrapElement).toHaveStyle('height: 200px') // (4 + 1) * 40
+
+    // 验证变更后重置回第一项：
+    // 1. 容器的垂直位移重置为0
+    expect(wrapElement).toHaveStyle('transform: translate3D(0,0px,0)')
+
+    // 2. 第一个子项没有额外的transform
+    const firstItem = container.querySelector(
+      '.custom-item:first-child'
+    ) as HTMLElement
+    expect(firstItem.style.transform).toBe('')
+
+    // 验证元素结构更新：应该有4个项目
+    const items = container.querySelectorAll('.custom-item')
+    expect(items).toHaveLength(4)
+
+    // 验证当前显示的是新列表的第一项内容
+    expect(items[0]).toHaveTextContent('新项目A')
+    expect(items[1]).toHaveTextContent('新项目B')
+    expect(items[2]).toHaveTextContent('新项目C')
+    expect(items[3]).toHaveTextContent('新项目D')
+
+    // 验证样式更新：每个item的高度样式
+    items.forEach((item) => {
+      expect(item).toHaveStyle(`height: ${height}px`)
+      expect(item).toHaveStyle(`line-height: ${height}px`)
+    })
+  })
+})

src/packages/noticebar/demo.taro.tsx

@@ -29,7 +29,7 @@ const NoticeBarDemo = () => {
       customeRight: '自定义右侧内容',
       vertical: '垂直滚动',
       complexAm: '纵向模式：自定义左侧图标',
-      customAm: '纵向模式：自定义滚动内容',
+      customAm: '纵向模式：自定义滚动内容，动态变更滚动内容',
       customRightIcon: '纵向模式：自定义右侧图标',
     },
     'en-US': {
@@ -42,7 +42,7 @@ const NoticeBarDemo = () => {
       customeRight: 'custom right content',
       vertical: 'Vertical Scroll',
       complexAm: 'Vertical Scroll Complex Animation',
-      customAm: 'Vertical Scroll Custom Style',
+      customAm: 'Vertical Scroll Custom Style，Dynamic Change Scroll Content',
       customRightIcon: 'Vertical Scroll Custom Right Icon',
     },
   })

src/packages/noticebar/demo.tsx

@@ -25,7 +25,7 @@ const NoticeBarDemo = () => {
       customeRight: '自定义右侧内容',
       vertical: '垂直滚动',
       complexAm: '纵向模式：自定义左侧图标',
-      customAm: '纵向模式：自定义滚动内容',
+      customAm: '纵向模式：自定义滚动内容，动态变更滚动内容',
       customRightIcon: '纵向模式：自定义右侧图标',
     },
     'en-US': {
@@ -38,7 +38,7 @@ const NoticeBarDemo = () => {
       customeRight: 'custom right content',
       vertical: 'Vertical Scroll',
       complexAm: 'Vertical Scroll Complex Animation',
-      customAm: 'Vertical Scroll Custom Style',
+      customAm: 'Vertical Scroll Custom Style，Dynamic Change Scroll Content',
       customRightIcon: 'Vertical Scroll Custom Right Icon',
     },
   })

src/packages/noticebar/demos/h5/demo10.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { NoticeBar } from '@nutui/nutui-react'
+import React, { useState } from 'react'
+import { Button, NoticeBar, Space } from '@nutui/nutui-react'
 
 const Demo9 = () => {
   const horseLamp3 = [
@@ -9,6 +9,8 @@ const Demo9 = () => {
     'CheckBox 复选按钮',
   ]
 
+  const [list, setList] = useState(horseLamp3)
+
   return (
     <>
       <NoticeBar
@@ -21,7 +23,7 @@ const Demo9 = () => {
           console.log('close')
         }}
       >
-        {horseLamp3.map((item, index) => {
+        {list.map((item, index) => {
           return (
             <div
               className="custom-item"
@@ -36,6 +38,26 @@ const Demo9 = () => {
           )
         })}
       </NoticeBar>
+
+      <Space style={{ marginTop: '10px' }}>
+        <Button
+          size="small"
+          onClick={() => {
+            setList((prev) => [...prev, `${prev.length + 1}`])
+          }}
+        >
+          添加最后一项
+        </Button>
+
+        <Button
+          size="small"
+          onClick={() => {
+            setList((prev) => prev.slice(0, -1))
+          }}
+        >
+          删除最后一项
+        </Button>
+      </Space>
     </>
   )
 }

src/packages/noticebar/demos/taro/demo10.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { NoticeBar } from '@nutui/nutui-react-taro'
+import React, { useState } from 'react'
+import { Button, NoticeBar, Space } from '@nutui/nutui-react-taro'
 
 const Demo10 = () => {
   const horseLamp3 = [
@@ -9,6 +9,8 @@ const Demo10 = () => {
     'CheckBox 复选按钮',
   ]
 
+  const [list, setList] = useState(horseLamp3)
+
   return (
     <>
       <NoticeBar
@@ -21,7 +23,7 @@ const Demo10 = () => {
           console.log('close')
         }}
       >
-        {horseLamp3.map((item, index) => {
+        {list.map((item, index) => {
           return (
             <div
               className="custom-item"
@@ -36,6 +38,26 @@ const Demo10 = () => {
           )
         })}
       </NoticeBar>
+
+      <Space style={{ marginTop: '10px' }}>
+        <Button
+          size="small"
+          onClick={() => {
+            setList((prev) => [...prev, `${prev.length + 1}`])
+          }}
+        >
+          添加最后一项
+        </Button>
+
+        <Button
+          size="small"
+          onClick={() => {
+            setList((prev) => prev.slice(0, -1))
+          }}
+        >
+          删除最后一项
+        </Button>
+      </Space>
     </>
   )
 }

src/packages/noticebar/doc.en-US.md

@@ -88,7 +88,7 @@ Add Right mode to set more custom content.
 
 :::
 
-### Vertical Scroll Custom Style
+### Vertical Scroll Custom Style， Dynamic Content Updates
 
 :::demo
 

src/packages/noticebar/doc.md

@@ -96,7 +96,7 @@ import { NoticeBar } from '@nutui/nutui-react'
 
 :::
 
-### 纵向模式：自定义右侧图标
+### 纵向模式：自定义右侧图标，动态变更滚动内容
 
 :::demo
 

src/packages/noticebar/doc.taro.md

@@ -96,7 +96,7 @@ import { NoticeBar } from '@nutui/nutui-react-taro'
 
 :::
 
-### 纵向模式：自定义右侧图标
+### 纵向模式：自定义右侧图标，动态变更滚动内容
 
 :::demo
 

src/packages/noticebar/doc.zh-TW.md

@@ -96,7 +96,7 @@ import { NoticeBar } from '@nutui/nutui-react'
 
 :::
 
-### 縱嚮模式：自定義右側圖標
+### 縱嚮模式：自定義右側圖標，動態變更滾動內容
 
 :::demo