diff --git a/src/packages/tabs/demos/h5/demo16.tsx b/src/packages/tabs/demos/h5/demo16.tsx
index 05a9fc54af..0fba5800e9 100644
--- a/src/packages/tabs/demos/h5/demo16.tsx
+++ b/src/packages/tabs/demos/h5/demo16.tsx
@@ -16,6 +16,11 @@ const Demo16 = () => {
百亿补贴
今日聚超值
真好真便宜
+ 限时秒杀
+ 品牌特惠
+ 折扣专区
+ 新品首发
+ 热销榜单
>
)
diff --git a/src/packages/tabs/demos/h5/demo17.tsx b/src/packages/tabs/demos/h5/demo17.tsx
index 801ba343f1..1cbbd2ce5e 100644
--- a/src/packages/tabs/demos/h5/demo17.tsx
+++ b/src/packages/tabs/demos/h5/demo17.tsx
@@ -3,7 +3,7 @@ import { Tabs } from '@nutui/nutui-react'
const Demo17 = () => {
const [tabvalue, setTabvalue] = useState('0')
- const list = Array.from(new Array(10).keys())
+ const list = Array.from(new Array(20).keys())
return (
<>
{
百亿补贴
今日聚超值
真好真便宜
+ 限时秒杀
+ 品牌特惠
+ 折扣专区
+ 新品首发
+ 热销榜单
>
)
diff --git a/src/packages/tabs/demos/taro/demo17.tsx b/src/packages/tabs/demos/taro/demo17.tsx
index e0c4b01bfa..13da8b81be 100644
--- a/src/packages/tabs/demos/taro/demo17.tsx
+++ b/src/packages/tabs/demos/taro/demo17.tsx
@@ -4,7 +4,7 @@ import { Text } from '@tarojs/components'
const Demo17 = () => {
const [tabvalue, setTabvalue] = useState('0')
- const list = Array.from(new Array(10).keys())
+ const list = Array.from(new Array(20).keys())
return (
<>
> & {
const scrollIntoView = (index: number) => {
raf(() => {
Promise.all([
- getRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`),
+ getRect(`#nut-tabs-titles-${name || uuid}`),
getAllRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-titles-item`),
]).then(([navRect, titleRects]: any) => {
const titleRect = titleRects[index]
@@ -152,16 +152,32 @@ export const Tabs: FunctionComponent> & {
let to = 0
if (direction === 'vertical') {
+ const totalHeight = titleRects.reduce(
+ (sum: number, curr: RectItem) => sum + curr.height,
+ 0
+ )
const top = titleRects
.slice(0, index)
.reduce((prev: number, curr: RectItem) => prev + curr.height, 0)
- to = top - (navRect.height - titleRect.height) / 2
+
+ to = Math.min(
+ Math.max(0, top - (navRect.height - titleRect.height) / 2),
+ totalHeight - navRect.height
+ )
} else {
+ const totalWidth = titleRects.reduce(
+ (sum: number, curr: RectItem) => sum + curr.width,
+ 0
+ )
const left = titleRects
.slice(0, index)
.reduce((prev: number, curr: RectItem) => prev + curr.width, 0)
- to = left - (navRect.width - titleRect.width) / 2
+ to = Math.min(
+ Math.max(0, left - (navRect.width - titleRect.width) / 2),
+ totalWidth - navRect.width
+ )
}
+
scrollDirection(to, direction)
nextTick(() => {