diff --git a/examples/about-sass-version/package.json b/examples/about-sass-version/package.json index bd394446..a261160b 100644 --- a/examples/about-sass-version/package.json +++ b/examples/about-sass-version/package.json @@ -52,7 +52,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "taro-hooks": "latest", - "taro-ui": "^3.2.2" + "taro-ui": "^3.3.0" }, "devDependencies": { "@babel/core": "^7.8.0", diff --git a/examples/lazy-load-component/package.json b/examples/lazy-load-component/package.json index e59b65e9..f61c4038 100644 --- a/examples/lazy-load-component/package.json +++ b/examples/lazy-load-component/package.json @@ -52,7 +52,7 @@ "@tarojs/taro": "3.6.2", "react": "^18.0.0", "react-dom": "^18.0.0", - "taro-ui": "^3.2.2" + "taro-ui": "^3.3.0" }, "devDependencies": { "@babel/core": "^7.8.0", diff --git a/packages/taro-ui-demo-rn/package.json b/packages/taro-ui-demo-rn/package.json index af1fae1a..275989fe 100644 --- a/packages/taro-ui-demo-rn/package.json +++ b/packages/taro-ui-demo-rn/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "taro-ui-demo-rn", - "version": "3.2.2", + "version": "3.3.0", "description": "Taro UI demo", "author": "O2Team ", "homepage": "https://taro-ui.taro.zone", diff --git a/packages/taro-ui-demo/package.json b/packages/taro-ui-demo/package.json index 1e56d47a..d25533b0 100644 --- a/packages/taro-ui-demo/package.json +++ b/packages/taro-ui-demo/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "taro-ui-demo", - "version": "3.2.2", + "version": "3.3.0", "description": "Taro UI demo", "author": "O2Team ", "homepage": "https://taro-ui.taro.zone", diff --git a/packages/taro-ui-docs/package.json b/packages/taro-ui-docs/package.json index cc59ca09..69faa93c 100644 --- a/packages/taro-ui-docs/package.json +++ b/packages/taro-ui-docs/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "taro-ui-docs", - "version": "3.2.2", + "version": "3.3.0", "description": "Taro UI docs", "author": "O2Team ", "homepage": "https://taro-ui.taro.zone", diff --git a/packages/taro-ui/package.json b/packages/taro-ui/package.json index 1e285ae2..97efe434 100644 --- a/packages/taro-ui/package.json +++ b/packages/taro-ui/package.json @@ -1,6 +1,6 @@ { "name": "taro-ui", - "version": "3.2.2", + "version": "3.3.0", "description": "UI KIT for Taro", "module": "dist/index.esm.js", "main": "dist/index.js", diff --git a/packages/taro-ui/rn/common/utils.ts b/packages/taro-ui/rn/common/utils.ts index 18705654..c722a1fd 100644 --- a/packages/taro-ui/rn/common/utils.ts +++ b/packages/taro-ui/rn/common/utils.ts @@ -214,13 +214,8 @@ function handleTouchScroll(flag: any): void { function pxTransform(size: number): string { if (!size) return '' - const designWidth = 750 - const deviceRatio = { - 640: 2.34 / 2, - 750: 1, - 828: 1.81 / 2 - } - return `${size / deviceRatio[designWidth]}rpx` + + return Taro.pxTransform(size) } function objectToString(style: object | string): string { diff --git a/packages/taro-ui/rn/components/indexes/index.tsx b/packages/taro-ui/rn/components/indexes/index.tsx index 8e8f5d4c..1a5b1e42 100644 --- a/packages/taro-ui/rn/components/indexes/index.tsx +++ b/packages/taro-ui/rn/components/indexes/index.tsx @@ -31,6 +31,7 @@ export default class AtIndexes extends React.Component< private listId: string private timeoutTimer: NodeJS.Timeout | number | undefined private listRef: any + private indexMap: { key: string; startHeight: number; endHeight: number }[] public constructor(props: AtIndexesProps) { super(props) @@ -39,7 +40,8 @@ export default class AtIndexes extends React.Component< _scrollTop: 0, _tipText: '', _isShowToast: false, - isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB + isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB, + currentIndex: -1 } // 右侧导航高度 this.menuHeight = 0 @@ -50,6 +52,7 @@ export default class AtIndexes extends React.Component< // 当前索引 this.currentIndex = -1 this.listId = isTest() ? 'indexes-list-AOTU2018' : `list-${uuid()}` + this.indexMap = [] } private handleClick = (item: Item): void => { @@ -136,23 +139,65 @@ export default class AtIndexes extends React.Component< } } - private initData(): void { + private async initData(): Promise { delayQuerySelector('.at-indexes__menu').then(rect => { const len = this.props.list.length this.menuHeight = rect[0].height this.startTop = rect[0].top this.itemHeight = Math.floor(this.menuHeight / (len + 1)) }) + + const headerHeight = + (await delayQuerySelector('#at-indexes__top'))?.[0]?.height || 0 + const itemHeight = + (await delayQuerySelector('.at-list__item'))?.[0].height || 0 + const titleHeight = + (await delayQuerySelector('.at-indexes__list-title'))?.[0].height || 0 + + this.indexMap = [] + this.props.list.forEach((dataList, i) => { + if (i === 0) { + this.indexMap.push({ + key: dataList.key, + startHeight: headerHeight, + endHeight: + dataList.items.length * itemHeight + headerHeight + titleHeight + }) + } else { + const prev = this.indexMap[i - 1] + this.indexMap.push({ + key: dataList.key, + startHeight: prev.endHeight, + endHeight: + prev.endHeight + dataList.items.length * itemHeight + titleHeight + }) + } + }) } private handleScroll(e: CommonEvent): void { if (e && e.detail) { + const scrollTop = e.detail.scrollTop + this.setState({ - _scrollTop: e.detail.scrollTop + _scrollTop: scrollTop }) + + this.getAnchorIndex(scrollTop) } } + // 根据滚动高度，判断当前应该显示的索引值 + private getAnchorIndex(scrollTop: number) { + const index = this.indexMap.findIndex(item => { + return scrollTop >= item.startHeight && scrollTop < item.endHeight + }) + + this.setState({ + currentIndex: index + }) + } + public UNSAFE_componentWillReceiveProps(nextProps: AtIndexesProps): void { if (nextProps.list.length !== this.props.list.length) { this.initData() @@ -178,7 +223,8 @@ export default class AtIndexes extends React.Component< _scrollIntoView, _tipText, _isShowToast, - isWEB + isWEB, + currentIndex } = this.state const toastStyle = { minWidth: pxTransform(100) } @@ -189,7 +235,9 @@ export default class AtIndexes extends React.Component< const targetView = `at-indexes__list-${key}` return ( diff --git a/packages/taro-ui/src/common/utils.ts b/packages/taro-ui/src/common/utils.ts index 8c54b2e2..c91a680b 100644 --- a/packages/taro-ui/src/common/utils.ts +++ b/packages/taro-ui/src/common/utils.ts @@ -214,13 +214,8 @@ function handleTouchScroll(flag: any): void { function pxTransform(size: number): string { if (!size) return '' - const designWidth = 750 - const deviceRatio = { - 640: 2.34 / 2, - 750: 1, - 828: 1.81 / 2 - } - return `${size / deviceRatio[designWidth]}rpx` + + return Taro.pxTransform(size) } function objectToString(style: object | string): string { diff --git a/packages/taro-ui/src/components/indexes/index.tsx b/packages/taro-ui/src/components/indexes/index.tsx index 4dfdd95b..29d6c965 100644 --- a/packages/taro-ui/src/components/indexes/index.tsx +++ b/packages/taro-ui/src/components/indexes/index.tsx @@ -31,6 +31,7 @@ export default class AtIndexes extends React.Component< private listId: string private timeoutTimer: NodeJS.Timeout | number | undefined private listRef: any + private indexMap: { key: string; startHeight: number; endHeight: number }[] public constructor(props: AtIndexesProps) { super(props) @@ -39,7 +40,8 @@ export default class AtIndexes extends React.Component< _scrollTop: 0, _tipText: '', _isShowToast: false, - isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB + isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB, + currentIndex: -1 } // 右侧导航高度 this.menuHeight = 0 @@ -50,6 +52,7 @@ export default class AtIndexes extends React.Component< // 当前索引 this.currentIndex = -1 this.listId = isTest() ? 'indexes-list-AOTU2018' : `list-${uuid()}` + this.indexMap = [] } private handleClick = (item: Item): void => { @@ -136,23 +139,65 @@ export default class AtIndexes extends React.Component< } } - private initData(): void { + private async initData(): Promise { delayQuerySelector('.at-indexes__menu').then(rect => { const len = this.props.list.length this.menuHeight = rect[0].height this.startTop = rect[0].top this.itemHeight = Math.floor(this.menuHeight / (len + 1)) }) + + const headerHeight = + (await delayQuerySelector('#at-indexes__top'))?.[0]?.height || 0 + const itemHeight = + (await delayQuerySelector('.at-list__item'))?.[0].height || 0 + const titleHeight = + (await delayQuerySelector('.at-indexes__list-title'))?.[0].height || 0 + + this.indexMap = [] + this.props.list.forEach((dataList, i) => { + if (i === 0) { + this.indexMap.push({ + key: dataList.key, + startHeight: headerHeight, + endHeight: + dataList.items.length * itemHeight + headerHeight + titleHeight + }) + } else { + const prev = this.indexMap[i - 1] + this.indexMap.push({ + key: dataList.key, + startHeight: prev.endHeight, + endHeight: + prev.endHeight + dataList.items.length * itemHeight + titleHeight + }) + } + }) } private handleScroll(e: CommonEvent): void { if (e && e.detail) { + const scrollTop = e.detail.scrollTop + this.setState({ - _scrollTop: e.detail.scrollTop + _scrollTop: scrollTop }) + + this.getAnchorIndex(scrollTop) } } + // 根据滚动高度，判断当前应该显示的索引值 + private getAnchorIndex(scrollTop: number) { + const index = this.indexMap.findIndex(item => { + return scrollTop >= item.startHeight && scrollTop < item.endHeight + }) + + this.setState({ + currentIndex: index + }) + } + public UNSAFE_componentWillReceiveProps(nextProps: AtIndexesProps): void { if (nextProps.list.length !== this.props.list.length) { this.initData() @@ -173,8 +218,14 @@ export default class AtIndexes extends React.Component< public render(): JSX.Element { const { className, customStyle, animation, topKey, list } = this.props - const { _scrollTop, _scrollIntoView, _tipText, _isShowToast, isWEB } = - this.state + const { + _scrollTop, + _scrollIntoView, + _tipText, + _isShowToast, + isWEB, + currentIndex + } = this.state const toastStyle = { minWidth: pxTransform(100) } const rootCls = classNames('at-indexes', className) @@ -184,7 +235,9 @@ export default class AtIndexes extends React.Component< const targetView = `at-indexes__list-${key}` return ( diff --git a/packages/taro-ui/src/style/components/indexes.scss b/packages/taro-ui/src/style/components/indexes.scss index 2920e4c0..871c07d3 100644 --- a/packages/taro-ui/src/style/components/indexes.scss +++ b/packages/taro-ui/src/style/components/indexes.scss @@ -27,6 +27,12 @@ color: $at-indexes-nav-color; font-size: $at-indexes-nav-font-size; text-align: center; + + &--active { + background-color: $at-indexes-nav-color; + color: $color-white; + border-radius: $border-radius-md; + } } &__body { diff --git a/packages/taro-ui/src/style/components/input-number.scss b/packages/taro-ui/src/style/components/input-number.scss index 5caa3f43..0b4dfc57 100644 --- a/packages/taro-ui/src/style/components/input-number.scss +++ b/packages/taro-ui/src/style/components/input-number.scss @@ -37,14 +37,14 @@ $at-input-number-btn-padding-lg: 20px; &__input, input { - display: inline-block; + display: flex; width: $at-input-number-width-min; height: auto; border-radius: 0; color: $at-input-number-text-color; font-size: $at-input-number-font-size; text-align: center; - line-height: $line-height-zh; + align-items: center; @include border-thin($width: 1PX, $directions: left right); } diff --git a/packages/taro-ui/types/indexes.d.ts b/packages/taro-ui/types/indexes.d.ts index 556af96a..619c5fcd 100644 --- a/packages/taro-ui/types/indexes.d.ts +++ b/packages/taro-ui/types/indexes.d.ts @@ -68,6 +68,7 @@ export interface AtIndexesState { _tipText: string _isShowToast: boolean isWEB: boolean + currentIndex: number } declare const AtIndexes: ComponentClass