diff --git a/src/packages/noticebar/__test__/noticebar.spec.tsx b/src/packages/noticebar/__test__/noticebar.spec.tsx index f0d9de3f25..628de43f83 100644 --- a/src/packages/noticebar/__test__/noticebar.spec.tsx +++ b/src/packages/noticebar/__test__/noticebar.spec.tsx @@ -220,3 +220,43 @@ test('vertical event test', async () => { fireEvent.click(box) await waitFor(() => expect(handleClick).toBeCalled()) }) + +test('vertical container height calculation with children', async () => { + const horseLamp1 = [ + 'NoticeBar 公告栏', + 'Cascader 级联选择', + 'DatePicker 日期选择器', + 'CheckBox 复选按钮', + ] + const height = 50 + const { container } = render( + + {horseLamp1.map((item, index) => { + return ( +
+ {item} +
+ ) + })} +
+ ) + + await waitFor( + () => { + const wrapElement = container.querySelector('.nut-noticebar-box-wrap') + if (wrapElement) { + // 验证容器高度应该是 (childCount + 1) * height + // childCount = 4, height = 50, 所以期望高度是 (4 + 1) * 50 = 250px + const expectedHeight = `${(horseLamp1.length + 1) * height}px` + console.log(wrapElement, 'wrapElement') + expect(wrapElement).toHaveStyle(`height: ${expectedHeight}`) + } + }, + // 由于init中并不会立刻设置样式,所以需要等待一段时间 + { timeout: 3000 } + ) +}) diff --git a/src/packages/noticebar/noticebar.taro.tsx b/src/packages/noticebar/noticebar.taro.tsx index b3d8bfab54..03a349cf38 100644 --- a/src/packages/noticebar/noticebar.taro.tsx +++ b/src/packages/noticebar/noticebar.taro.tsx @@ -358,7 +358,7 @@ export const NoticeBar: FunctionComponent< target.style.transitionDuration = `${ swiperRef.current.moving ? 0 : duration }ms` - target.style.height = `${Number(height) * childCount}px` + target.style.height = `${Number(height) * (childCount + 1)}px` target.style.transform = `translate3D(0,${_offset}px,0)` } // 无缝滚动第一个元素位移控制 diff --git a/src/packages/noticebar/noticebar.tsx b/src/packages/noticebar/noticebar.tsx index cfd8ee0311..7d86946d40 100644 --- a/src/packages/noticebar/noticebar.tsx +++ b/src/packages/noticebar/noticebar.tsx @@ -353,7 +353,7 @@ export const NoticeBar: FunctionComponent< target.style.transitionDuration = `${ swiperRef.current.moving ? 0 : duration }ms` - target.style.height = `${Number(height) * childCount}px` + target.style.height = `${Number(height) * (childCount + 1)}px` target.style.transform = `translate3D(0,${_offset}px,0)` } // 无缝滚动第一个元素位移控制