From b85360eca58fdcb877ba682bcfdb431999a3bf3c Mon Sep 17 00:00:00 2001 From: liangguirong Date: Thu, 24 Oct 2024 10:02:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DBottomTabsIndicator=E6=8C=87?= =?UTF-8?q?=E7=A4=BA=E5=99=A8=E5=B7=A6=E5=8F=B3=E5=BF=AB=E9=80=9F=E6=BB=91?= =?UTF-8?q?=E5=8A=A8=E9=97=AA=E9=80=80=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liangguirong --- CHANGELOG.md | 4 ++ entry/oh-package.json5 | 2 +- library/oh-package.json5 | 2 +- .../ets/components/BottomTabsIndicator.ets | 66 ++++++++++++------- oh-package.json5 | 6 +- 5 files changed, 53 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 40111eb..c598c4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## v2.1.1-rc.0 + +- Fixed the issue that the BottomTabsIndicator indicator quickly swiped left and right to crash + ## v2.1.0 - 发布2.1.0正式版本 diff --git a/entry/oh-package.json5 b/entry/oh-package.json5 index abe72f2..0a5f44c 100644 --- a/entry/oh-package.json5 +++ b/entry/oh-package.json5 @@ -10,7 +10,7 @@ }, "description": "example description", "main": "", - "version": "2.1.0", + "version": "2.1.1-rc.0", "dependencies": { "@ohos/circleindicator": "file:../library" } diff --git a/library/oh-package.json5 b/library/oh-package.json5 index 91a3b71..aa8d8e4 100644 --- a/library/oh-package.json5 +++ b/library/oh-package.json5 @@ -13,7 +13,7 @@ "main": "index.ets", "repository": "https://gitee.com/openharmony-sig/CircleIndicator", "type": "module", - "version": "2.1.0", + "version": "2.1.1-rc.0", "tags": [ "OpenHarmony", "indicator", diff --git a/library/src/main/ets/components/BottomTabsIndicator.ets b/library/src/main/ets/components/BottomTabsIndicator.ets index 4940604..8159e2e 100644 --- a/library/src/main/ets/components/BottomTabsIndicator.ets +++ b/library/src/main/ets/components/BottomTabsIndicator.ets @@ -17,23 +17,24 @@ * limitations under the License. */ -import {ColorGradient} from '../utils/ColorGradient' +import { ColorGradient } from '../utils/ColorGradient' import { BottomTabsModel } from '../models/BottomTabsModel' -import { TabIcon } from './model/TabIcon' -import { TabInfo } from './model/TabInfo' +import { TabIcon } from './model/TabIcon' +import { TabInfo } from './model/TabInfo' @ComponentV2 struct BottomTabsIndicator { @Param model: BottomTabsModel = new BottomTabsModel(null) @Param @Require itemIndex: number - @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Event $itemIndex: (val: number) => void = (val: number) => { + }; @Param titles: TabIcon[] = [] - private colorsUtilsToS: ColorGradient| null = null - private colorsUtilsToN: ColorGradient| null = null + private colorsUtilsToS: ColorGradient | null = null + private colorsUtilsToN: ColorGradient | null = null private tabs: Array = [] private startX = 0 private indicatorOffset = 0 - isMove: number= 0 // 0 停止 1左 2右 + isMove: number = 0 // 0 停止 1左 2右 aboutToAppear() { this.model.setOnPageTouchListener((event: TouchEvent, currentIndex: number) => { @@ -67,7 +68,9 @@ struct BottomTabsIndicator { private dealWithFont(offset: number): number { - if (!offset) offset = 0 + if (!offset) { + offset = 0 + } let centerIndex = -1 if (this.model.getCenterImage() != null) { @@ -98,7 +101,9 @@ struct BottomTabsIndicator { * 向左滑动 */ else if (this.isMove == 1) { - if (offset <= 0) return 0 + if (offset <= 0) { + return 0 + } if (centerIndex !== -1) { offset = offset + 1 } @@ -122,10 +127,12 @@ struct BottomTabsIndicator { // 处理 文字颜色 渐变 let fontColorDistance = Number.parseInt((distance * 100).toFixed(0)) // 偏移量 0 - 99 - if (this.colorsUtilsToS) + if (this.colorsUtilsToS) { this.tabs[nextPage].fontColor = this.colorsUtilsToS.getColorByFraction(fontColorDistance) - if (this.colorsUtilsToN) + } + if (this.colorsUtilsToN) { this.tabs[previousPage].fontColor = this.colorsUtilsToN.getColorByFraction(fontColorDistance) + } // 处理 icon大小 渐变 @@ -139,9 +146,17 @@ struct BottomTabsIndicator { * 向右滑动 */ else if (this.isMove == 2) { - if (offset >= this.tabs.length - 1) return 0 + if (offset >= this.tabs.length - 1) { + return 0 + } let nextPage = Math.ceil(offset) // 下一页 - let previousPage = nextPage - 1 // 上一页 + let previousPage: number // 上一页 + // 左边边界值判断 + if (nextPage == 0) { + previousPage = 0 + } else { + previousPage = nextPage - 1 + } if (centerIndex !== -1 && nextPage >= centerIndex) { offset = offset + 1 nextPage = nextPage + 1 @@ -160,10 +175,12 @@ struct BottomTabsIndicator { // 处理 文字颜色 渐变 let fontColorDistance: number = Number.parseInt((distance * 100).toFixed(0)) // 偏移量 0 - 99 - if (this.colorsUtilsToS) + if (this.colorsUtilsToS) { this.tabs[nextPage].fontColor = this.colorsUtilsToS.getColorByFraction(fontColorDistance) - if (this.colorsUtilsToN) - this.tabs[previousPage].fontColor = this.colorsUtilsToN.getColorByFraction(fontColorDistance) + } + if (this.colorsUtilsToN) { + this.tabs[previousPage].fontColor = this.colorsUtilsToN.getColorByFraction(fontColorDistance) + } // 处理 icon大小 渐变 if (this.model) { @@ -177,7 +194,10 @@ struct BottomTabsIndicator { build() { Stack({ alignContent: Alignment.Start }) { - Text(this.dealWithFont(this.itemIndex - this.indicatorOffset / 1080)+' ').fontSize(12).fontColor('#ffffff').visibility(Visibility.Hidden) + Text(this.dealWithFont(this.itemIndex - this.indicatorOffset / 1080) + ' ') + .fontSize(12) + .fontColor('#ffffff') + .visibility(Visibility.Hidden) Row() { ForEach(this.tabs, (item: TabInfo) => { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { @@ -198,13 +218,16 @@ struct BottomTabsIndicator { .height(this.model.isIconsScale() ? item.iconSize : this.model.getSelectedIconSize()) Text(item.tab?.text) - .fontSize(this.model.isIconsScale() ? this.model.getUnselectedTextSize() : this.model.getSelectedTextSize()) - .fontColor(this.itemIndex === item.index ? this.model.getSelectedTextColor() : this.model.getUnselectedTextColor()) + .fontSize(this.model.isIconsScale() ? this.model.getUnselectedTextSize() : + this.model.getSelectedTextSize()) + .fontColor(this.itemIndex === item.index ? this.model.getSelectedTextColor() : + this.model.getUnselectedTextColor()) } .padding(5) } } - .width(this.model.getWidth() / (this.model.getCenterImage() !== null ? this.titles.length + 1 : this.titles.length)) + .width(this.model.getWidth() / + (this.model.getCenterImage() !== null ? this.titles.length + 1 : this.titles.length)) .height('100%') .onClick(() => { if (item.index == undefined) { @@ -249,8 +272,7 @@ struct BottomTabsIndicator { if (event.type === TouchType.Up) { if (this.indicatorOffset >= this.model.getWidth() / 2 && currentIndex > 0) { currentIndex-- - } - else if (this.indicatorOffset <= -this.model.getWidth() / 2 && currentIndex < this.titles.length - 1) { + } else if (this.indicatorOffset <= -this.model.getWidth() / 2 && currentIndex < this.titles.length - 1) { currentIndex++ } this.model.getTabsController()?.changeIndex(currentIndex) diff --git a/oh-package.json5 b/oh-package.json5 index fafe438..3625f5e 100644 --- a/oh-package.json5 +++ b/oh-package.json5 @@ -1,4 +1,5 @@ { + "modelVersion": "5.0.0", "license": "Apache-2.0", "devDependencies": { "@ohos/hypium": "1.0.6" @@ -12,7 +13,6 @@ }, "description": "example description", "main": "", - "version": "2.1.0", + "version": "2.1.1-rc.0", "dependencies": {}, - "modelVersion": "" -} +} \ No newline at end of file -- Gitee