Skip to content

Commit 2da93bb

Browse files
robinSaraph1nes
robin
and
Saraph1nes
authored
chore(release): publish 3.3.0 (#1754)
# [](v3.2.2...v) (2024-01-24) ### Bug Fixes * **divider:** 解决单位编译不正确的问题 [#1725](#1725) ([3243e13](3243e13)) * **swipe-action:** 修复在 h5 环境下点击事件失效的问题 ([1ef87d2](1ef87d2)) * **tabs:** 修复 h5 环境下样式报错的问题 ([8ea0de3](8ea0de3)) * 解决小程序下无法获取元素信息的问题 ([8927199](8927199)), closes [#1734](#1734) * 解决未居中的问题 ([28e47b6](28e47b6)) ### Features * **indexes:** 右侧索引跟随滚动区域高亮 [#1693](#1693) ([0140a61](0140a61)) --------- Co-authored-by: Xia Yuxuan <52569690+Saraph1nes@users.noreply.github.com> Co-authored-by: xiayuxuan <xiayx.leo@qq.com>
1 parent 9383a54 commit 2da93bb

13 files changed

Lines changed: 131 additions & 33 deletions

File tree

‎examples/about-sass-version/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"react": "^17.0.2",
5353
"react-dom": "^17.0.2",
5454
"taro-hooks": "latest",
55-
"taro-ui": "^3.2.2"
55+
"taro-ui": "^3.3.0"
5656
},
5757
"devDependencies": {
5858
"@babel/core": "^7.8.0",

‎examples/lazy-load-component/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"@tarojs/taro": "3.6.2",
5353
"react": "^18.0.0",
5454
"react-dom": "^18.0.0",
55-
"taro-ui": "^3.2.2"
55+
"taro-ui": "^3.3.0"
5656
},
5757
"devDependencies": {
5858
"@babel/core": "^7.8.0",

‎packages/taro-ui-demo-rn/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "taro-ui-demo-rn",
4-
"version": "3.2.2",
4+
"version": "3.3.0",
55
"description": "Taro UI demo",
66
"author": "O2Team <aotu.io>",
77
"homepage": "https://taro-ui.taro.zone",

‎packages/taro-ui-demo/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "taro-ui-demo",
4-
"version": "3.2.2",
4+
"version": "3.3.0",
55
"description": "Taro UI demo",
66
"author": "O2Team <aotu.io>",
77
"homepage": "https://taro-ui.taro.zone",

‎packages/taro-ui-docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "taro-ui-docs",
4-
"version": "3.2.2",
4+
"version": "3.3.0",
55
"description": "Taro UI docs",
66
"author": "O2Team <aotu.io>",
77
"homepage": "https://taro-ui.taro.zone",

‎packages/taro-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "taro-ui",
3-
"version": "3.2.2",
3+
"version": "3.3.0",
44
"description": "UI KIT for Taro",
55
"module": "dist/index.esm.js",
66
"main": "dist/index.js",

‎packages/taro-ui/rn/common/utils.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,8 @@ function handleTouchScroll(flag: any): void {
214214

215215
function pxTransform(size: number): string {
216216
if (!size) return ''
217-
const designWidth = 750
218-
const deviceRatio = {
219-
640: 2.34 / 2,
220-
750: 1,
221-
828: 1.81 / 2
222-
}
223-
return `${size / deviceRatio[designWidth]}rpx`
217+
218+
return Taro.pxTransform(size)
224219
}
225220

226221
function objectToString(style: object | string): string {

‎packages/taro-ui/rn/components/indexes/index.tsx‎

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default class AtIndexes extends React.Component<
3131
private listId: string
3232
private timeoutTimer: NodeJS.Timeout | number | undefined
3333
private listRef: any
34+
private indexMap: { key: string; startHeight: number; endHeight: number }[]
3435

3536
public constructor(props: AtIndexesProps) {
3637
super(props)
@@ -39,7 +40,8 @@ export default class AtIndexes extends React.Component<
3940
_scrollTop: 0,
4041
_tipText: '',
4142
_isShowToast: false,
42-
isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB
43+
isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB,
44+
currentIndex: -1
4345
}
4446
// 右侧导航高度
4547
this.menuHeight = 0
@@ -50,6 +52,7 @@ export default class AtIndexes extends React.Component<
5052
// 当前索引
5153
this.currentIndex = -1
5254
this.listId = isTest() ? 'indexes-list-AOTU2018' : `list-${uuid()}`
55+
this.indexMap = []
5356
}
5457

5558
private handleClick = (item: Item): void => {
@@ -136,23 +139,65 @@ export default class AtIndexes extends React.Component<
136139
}
137140
}
138141

139-
private initData(): void {
142+
private async initData(): Promise<void> {
140143
delayQuerySelector('.at-indexes__menu').then(rect => {
141144
const len = this.props.list.length
142145
this.menuHeight = rect[0].height
143146
this.startTop = rect[0].top
144147
this.itemHeight = Math.floor(this.menuHeight / (len + 1))
145148
})
149+
150+
const headerHeight =
151+
(await delayQuerySelector('#at-indexes__top'))?.[0]?.height || 0
152+
const itemHeight =
153+
(await delayQuerySelector('.at-list__item'))?.[0].height || 0
154+
const titleHeight =
155+
(await delayQuerySelector('.at-indexes__list-title'))?.[0].height || 0
156+
157+
this.indexMap = []
158+
this.props.list.forEach((dataList, i) => {
159+
if (i === 0) {
160+
this.indexMap.push({
161+
key: dataList.key,
162+
startHeight: headerHeight,
163+
endHeight:
164+
dataList.items.length * itemHeight + headerHeight + titleHeight
165+
})
166+
} else {
167+
const prev = this.indexMap[i - 1]
168+
this.indexMap.push({
169+
key: dataList.key,
170+
startHeight: prev.endHeight,
171+
endHeight:
172+
prev.endHeight + dataList.items.length * itemHeight + titleHeight
173+
})
174+
}
175+
})
146176
}
147177

148178
private handleScroll(e: CommonEvent): void {
149179
if (e && e.detail) {
180+
const scrollTop = e.detail.scrollTop
181+
150182
this.setState({
151-
_scrollTop: e.detail.scrollTop
183+
_scrollTop: scrollTop
152184
})
185+
186+
this.getAnchorIndex(scrollTop)
153187
}
154188
}
155189

190+
// 根据滚动高度，判断当前应该显示的索引值
191+
private getAnchorIndex(scrollTop: number) {
192+
const index = this.indexMap.findIndex(item => {
193+
return scrollTop >= item.startHeight && scrollTop < item.endHeight
194+
})
195+
196+
this.setState({
197+
currentIndex: index
198+
})
199+
}
200+
156201
public UNSAFE_componentWillReceiveProps(nextProps: AtIndexesProps): void {
157202
if (nextProps.list.length !== this.props.list.length) {
158203
this.initData()
@@ -178,7 +223,8 @@ export default class AtIndexes extends React.Component<
178223
_scrollIntoView,
179224
_tipText,
180225
_isShowToast,
181-
isWEB
226+
isWEB,
227+
currentIndex
182228
} = this.state
183229

184230
const toastStyle = { minWidth: pxTransform(100) }
@@ -189,7 +235,9 @@ export default class AtIndexes extends React.Component<
189235
const targetView = `at-indexes__list-${key}`
190236
return (
191237
<View
192-
className='at-indexes__menu-item'
238+
className={classNames('at-indexes__menu-item', {
239+
'at-indexes__menu-item--active': currentIndex === i
240+
})}
193241
key={key}
194242
onClick={this.jumpTarget.bind(this, targetView, i + 1)}
195243
>

‎packages/taro-ui/src/common/utils.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,8 @@ function handleTouchScroll(flag: any): void {
214214

215215
function pxTransform(size: number): string {
216216
if (!size) return ''
217-
const designWidth = 750
218-
const deviceRatio = {
219-
640: 2.34 / 2,
220-
750: 1,
221-
828: 1.81 / 2
222-
}
223-
return `${size / deviceRatio[designWidth]}rpx`
217+
218+
return Taro.pxTransform(size)
224219
}
225220

226221
function objectToString(style: object | string): string {

‎packages/taro-ui/src/components/indexes/index.tsx‎

Lines changed: 59 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default class AtIndexes extends React.Component<
3131
private listId: string
3232
private timeoutTimer: NodeJS.Timeout | number | undefined
3333
private listRef: any
34+
private indexMap: { key: string; startHeight: number; endHeight: number }[]
3435

3536
public constructor(props: AtIndexesProps) {
3637
super(props)
@@ -39,7 +40,8 @@ export default class AtIndexes extends React.Component<
3940
_scrollTop: 0,
4041
_tipText: '',
4142
_isShowToast: false,
42-
isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB
43+
isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB,
44+
currentIndex: -1
4345
}
4446
// 右侧导航高度
4547
this.menuHeight = 0
@@ -50,6 +52,7 @@ export default class AtIndexes extends React.Component<
5052
// 当前索引
5153
this.currentIndex = -1
5254
this.listId = isTest() ? 'indexes-list-AOTU2018' : `list-${uuid()}`
55+
this.indexMap = []
5356
}
5457

5558
private handleClick = (item: Item): void => {
@@ -136,23 +139,65 @@ export default class AtIndexes extends React.Component<
136139
}
137140
}
138141

139-
private initData(): void {
142+
private async initData(): Promise<void> {
140143
delayQuerySelector('.at-indexes__menu').then(rect => {
141144
const len = this.props.list.length
142145
this.menuHeight = rect[0].height
143146
this.startTop = rect[0].top
144147
this.itemHeight = Math.floor(this.menuHeight / (len + 1))
145148
})
149+
150+
const headerHeight =
151+
(await delayQuerySelector('#at-indexes__top'))?.[0]?.height || 0
152+
const itemHeight =
153+
(await delayQuerySelector('.at-list__item'))?.[0].height || 0
154+
const titleHeight =
155+
(await delayQuerySelector('.at-indexes__list-title'))?.[0].height || 0
156+
157+
this.indexMap = []
158+
this.props.list.forEach((dataList, i) => {
159+
if (i === 0) {
160+
this.indexMap.push({
161+
key: dataList.key,
162+
startHeight: headerHeight,
163+
endHeight:
164+
dataList.items.length * itemHeight + headerHeight + titleHeight
165+
})
166+
} else {
167+
const prev = this.indexMap[i - 1]
168+
this.indexMap.push({
169+
key: dataList.key,
170+
startHeight: prev.endHeight,
171+
endHeight:
172+
prev.endHeight + dataList.items.length * itemHeight + titleHeight
173+
})
174+
}
175+
})
146176
}
147177

148178
private handleScroll(e: CommonEvent): void {
149179
if (e && e.detail) {
180+
const scrollTop = e.detail.scrollTop
181+
150182
this.setState({
151-
_scrollTop: e.detail.scrollTop
183+
_scrollTop: scrollTop
152184
})
185+
186+
this.getAnchorIndex(scrollTop)
153187
}
154188
}
155189

190+
// 根据滚动高度，判断当前应该显示的索引值
191+
private getAnchorIndex(scrollTop: number) {
192+
const index = this.indexMap.findIndex(item => {
193+
return scrollTop >= item.startHeight && scrollTop < item.endHeight
194+
})
195+
196+
this.setState({
197+
currentIndex: index
198+
})
199+
}
200+
156201
public UNSAFE_componentWillReceiveProps(nextProps: AtIndexesProps): void {
157202
if (nextProps.list.length !== this.props.list.length) {
158203
this.initData()
@@ -173,8 +218,14 @@ export default class AtIndexes extends React.Component<
173218

174219
public render(): JSX.Element {
175220
const { className, customStyle, animation, topKey, list } = this.props
176-
const { _scrollTop, _scrollIntoView, _tipText, _isShowToast, isWEB } =
177-
this.state
221+
const {
222+
_scrollTop,
223+
_scrollIntoView,
224+
_tipText,
225+
_isShowToast,
226+
isWEB,
227+
currentIndex
228+
} = this.state
178229

179230
const toastStyle = { minWidth: pxTransform(100) }
180231
const rootCls = classNames('at-indexes', className)
@@ -184,7 +235,9 @@ export default class AtIndexes extends React.Component<
184235
const targetView = `at-indexes__list-${key}`
185236
return (
186237
<View
187-
className='at-indexes__menu-item'
238+
className={classNames('at-indexes__menu-item', {
239+
'at-indexes__menu-item--active': currentIndex === i
240+
})}
188241
key={key}
189242
onClick={this.jumpTarget.bind(this, targetView, i + 1)}
190243
>

0 commit comments

Comments
 (0)