diff --git a/screenshots/device/scroll1.png b/screenshots/device/scroll1.png index 7cb9e6836610dc5c83ffc8abc39faad7a8ea1e79..2e161872a2f10cb881cbcad7b11b04424cda3b9d 100644 Binary files a/screenshots/device/scroll1.png and b/screenshots/device/scroll1.png differ diff --git a/screenshots/device/scroll2.png b/screenshots/device/scroll2.png index a095b743fc6c82eb0ffe587cd5b0ffaefdb1f16d..b49ecabe744c71560c18c4e0b5b85431fcb3c5d2 100644 Binary files a/screenshots/device/scroll2.png and b/screenshots/device/scroll2.png differ diff --git a/screenshots/device/scroll3.png b/screenshots/device/scroll3.png index 658d3bcd7cd2d83d254bd35755e37f433360e56a..de428888cf79c5dfe6fcc7fe2e068797fabd5ac0 100644 Binary files a/screenshots/device/scroll3.png and b/screenshots/device/scroll3.png differ diff --git a/screenshots/device/scroll_en1.png b/screenshots/device/scroll_en1.png index 4f9b0a3611fd6de7407d3bf6061789f961f789a9..8350c3cef3dbe8b27dd8eededadd38e436d6dbe3 100644 Binary files a/screenshots/device/scroll_en1.png and b/screenshots/device/scroll_en1.png differ diff --git a/screenshots/device/scroll_en2.png b/screenshots/device/scroll_en2.png index 17ec51d31f519bb7720e4131e2a61b17a84076f1..c1c82e2dd9e878ff8650569e786dc08e95818af9 100644 Binary files a/screenshots/device/scroll_en2.png and b/screenshots/device/scroll_en2.png differ diff --git a/screenshots/device/scroll_en3.png b/screenshots/device/scroll_en3.png index e2b7c1aeb9b716d0354f97e27c2050f7b689285b..7fee4e149983d61127488c11564ad6e78096c952 100644 Binary files a/screenshots/device/scroll_en3.png and b/screenshots/device/scroll_en3.png differ diff --git a/scrollcomponentlibrary/src/main/ets/component/ScrollComponentNestedSlidingComponent.ets b/scrollcomponentlibrary/src/main/ets/component/ScrollComponentNestedSlidingComponent.ets index a0b90f25fca1e959ee3c5f01f550e94c3d0c5edf..3cf9d878e98e311a34dd66a9d4074e43fc2bc429 100644 --- a/scrollcomponentlibrary/src/main/ets/component/ScrollComponentNestedSlidingComponent.ets +++ b/scrollcomponentlibrary/src/main/ets/component/ScrollComponentNestedSlidingComponent.ets @@ -47,6 +47,7 @@ export struct ScrollComponentNestedSlidingComponent { @StorageProp(CommonConstants.KEY_PREFIX_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; private scrollerForScroll: Scroller = new Scroller(); private scrollerForList: Scroller = new Scroller(); + private listArrCount: number = listArr.length; onSegmentButtonChange() { this.currentIndex = this.tabSelectedIndexes[0]; @@ -56,102 +57,107 @@ export struct ScrollComponentNestedSlidingComponent { tabBuilder(index: number, name: ResourceStr) { Column() { Text(name) - .fontColor(this.currentIndex === index ? $r('sys.color.font_on_primary') : $r('sys.color.brand')) + .fontColor(this.currentIndex === index ? $r('app.color.active_font_color') : $r('app.color.font_color')) .fontSize($r('app.float.middle_font_size')) + .fontWeight(this.currentIndex === index ? CommonConstants.FONT_WEIGHT_FIVE : CommonConstants.FONT_WEIGHT_FOUR) + .lineHeight($r('app.float.title_line_height')) + .margin({ + top: $r('app.float.title_margin_top'), + bottom: $r('app.float.title_margin_bottom') + }) + Divider() + .strokeWidth(CommonConstants.STROKE_WIDTH) + .width($r('app.float.divider_width')) + .color($r('app.color.active_font_color')) + .opacity(this.currentIndex === index ? CommonConstants.FULL_OPACITY : CommonConstants.ZERO_OPACITY) } - .borderRadius($r('app.float.button_border_radius')) - .justifyContent(FlexAlign.Center) - .height($r('app.float.button_height')) - .width($r('app.float.button_width')) - .backgroundColor(this.currentIndex === index ? $r('sys.color.brand') : $r('sys.color.comp_background_tertiary')) } @Builder - listBuilder(listName: ResourceStr) { - List({ scroller: this.scrollerForList }) { - ForEach(listArr, (item: string, index: number) => { - ListItem() { - Row() { - Text(listName) - .fontSize($r('app.float.middle_font_size')) - .fontColor($r('sys.color.font_primary')) - .fontWeight(CommonConstants.FONT_WEIGHT_FIVE) - Text(item) - .fontSize($r('app.float.middle_font_size')) - .fontWeight(CommonConstants.FONT_WEIGHT_FIVE) - .fontColor($r('sys.color.font_primary')) + listBuilder(listName: ResourceStr, tabName: ResourceStr, index: number) { + TabContent() { + List({ scroller: this.scrollerForList }) { + ForEach(listArr, (item: string, index: number) => { + ListItem() { + Row() { + Text(listName) + .fontSize($r('app.float.middle_font_size')) + .fontColor($r('sys.color.font_primary')) + .fontWeight(CommonConstants.FONT_WEIGHT_FIVE) + Text(item) + .fontSize($r('app.float.middle_font_size')) + .fontWeight(CommonConstants.FONT_WEIGHT_FIVE) + .fontColor($r('sys.color.font_primary')) + } + .justifyContent(FlexAlign.Center) + .borderColor($r('sys.color.comp_divider')) + .borderWidth({ bottom: 0.5 }) + .backgroundColor($r('sys.color.comp_background_primary')) + .width(CommonConstants.FULL_WIDTH) + .height(CommonConstants.FULL_HEIGHT) } - .justifyContent(FlexAlign.Center) - .borderColor($r('sys.color.comp_divider')) - .borderWidth({ bottom: 0.5 }) + .borderRadius({ + bottomLeft: this.curBp === 'sm' ? ((index === this.listArrCount - 1) ? $r('app.float.list_item_radius') : 0) : + ((index === this.listArrCount - 2) ? $r('app.float.list_item_radius') : 0), + bottomRight: this.curBp === 'sm' ? ((index === this.listArrCount - 1) ? $r('app.float.list_item_radius') : 0) : + ((index === this.listArrCount - 1) ? $r('app.float.list_item_radius') : 0) + }) .backgroundColor($r('sys.color.comp_background_primary')) + .padding({ left: $r('app.float.list_item_padding'), right: $r('app.float.list_item_padding') }) .width(CommonConstants.FULL_WIDTH) - .height(CommonConstants.FULL_HEIGHT) - } - .borderRadius({ - bottomLeft: this.curBp === 'sm' ? ((index === listArr.length - 1) ? $r('app.float.list_item_radius') : 0) : - ((index === listArr.length - 2) ? $r('app.float.list_item_radius') : 0), - bottomRight: this.curBp === 'sm' ? ((index === listArr.length - 1) ? $r('app.float.list_item_radius') : 0) : - ((index === listArr.length - 1) ? $r('app.float.list_item_radius') : 0) - }) - .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ left: $r('app.float.list_item_padding'), right: $r('app.float.list_item_padding') }) - .width(CommonConstants.FULL_WIDTH) - .height($r('app.float.list_item_height')) - }, (item: string) => JSON.stringify(item)) + .height($r('app.float.list_item_height')) + }, (item: string) => JSON.stringify(item)) + } + .lanes(new BreakpointType(1, 2, 2).getValue(this.curBp)) + .width(CommonConstants.FULL_WIDTH) + .height(CommonConstants.FULL_HEIGHT) + .edgeEffect(EdgeEffect.None) + .scrollBar(BarState.Off) + .nestedScroll({ + scrollForward: NestedScrollMode.PARENT_FIRST, + scrollBackward: NestedScrollMode.SELF_FIRST + }) } - .borderRadius($r('app.float.list_item_radius')) - .lanes(new BreakpointType(1, 2, 2).getValue(this.curBp)) - .width(CommonConstants.FULL_WIDTH) - .height(CommonConstants.FULL_HEIGHT) - .edgeEffect(EdgeEffect.None) - .scrollBar(BarState.Off) - .nestedScroll({ - scrollForward: NestedScrollMode.PARENT_FIRST, - scrollBackward: NestedScrollMode.SELF_FIRST - }) + .tabBar(this.tabBuilder(index, tabName)) } build() { Column() { - Text($r('app.string.title')) - .fontWeight(FontWeight.Bold) - .fontSize($r('app.float.big_font_size')) - .height($r('app.float.list_item_height')) - .textAlign(TextAlign.Start) - .width(CommonConstants.FULL_WIDTH) - .fontColor($r('sys.color.font_primary')) - .margin({ - bottom: $r('app.float.discover_bottom_padding'), - top: $r('sys.float.padding_level32') - }) - - Scroll(this.scrollerForScroll) { - Column() { - SegmentButton({ options: this.tabOptions, selectedIndexes: this.tabSelectedIndexes }) - .width(this.curBp === 'sm' ? '100%' : 448) - .margin({ bottom: $r('sys.float.padding_level6') }) - if (this.currentIndex === 0) { - this.listBuilder($r('app.string.goods')) - } else { - this.listBuilder($r('app.string.Itinerary')) + Stack({ alignContent: Alignment.Top }) { + Scroll(this.scrollerForScroll) { + Column() { + Text($r('app.string.title')) + .fontWeight(FontWeight.Bold) + .fontSize($r('app.float.big_font_size')) + .height($r('app.float.list_item_height')) + .textAlign(TextAlign.Start) + .width(CommonConstants.FULL_WIDTH) + .fontColor($r('sys.color.font_primary')) + .margin({ + left: $r('sys.float.padding_level12'), + // bottom: $r('app.float.discover_bottom_padding'), + top: $r('sys.float.padding_level16') + }) + Tabs() { + this.listBuilder($r('app.string.goods'), $r('app.string.Promotional'), 0) + this.listBuilder($r('app.string.Itinerary'), $r('app.string.Travel'), 1) + } + .barWidth($r('app.float.bar_width')) + .barHeight($r('app.float.bar_height')) + .onAnimationStart((_index: number, targetIndex: number, _event: TabsAnimationEvent) => { + this.currentIndex = targetIndex; + }) } } + .scrollBar(BarState.Off) + .width(CommonConstants.FULL_WIDTH) + .height(CommonConstants.FULL_HEIGHT) } - .height(new BreakpointType('210%', '120%', '120%').getValue(this.curBp)) - .scrollBar(BarState.Off) .width(CommonConstants.FULL_WIDTH) + .height(CommonConstants.STACK_HEIGHT) } - .padding({ - left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), - $r('sys.float.padding_level16')).getValue(this.curBp), - right: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), - $r('sys.float.padding_level16')).getValue(this.curBp), - top: this.statusBarHeight, - bottom: '155vp', - }) - .width(CommonConstants.FULL_WIDTH) .height(CommonConstants.FULL_HEIGHT) - .backgroundColor($r('sys.color.background_secondary')) + .backgroundColor($r('sys.color.ohos_id_color_background')) } -} \ No newline at end of file +} + diff --git a/scrollcomponentlibrary/src/main/ets/constants/CommonConstants.ets b/scrollcomponentlibrary/src/main/ets/constants/CommonConstants.ets index 8e35b33b8b01c91394e18e65cc0be83857d6bf96..0e11943f2b22884e9e32be060d0dc2a564c9512b 100644 --- a/scrollcomponentlibrary/src/main/ets/constants/CommonConstants.ets +++ b/scrollcomponentlibrary/src/main/ets/constants/CommonConstants.ets @@ -21,6 +21,23 @@ export class CommonConstants { * font weight is 500. */ public static readonly FONT_WEIGHT_FIVE: number = 500; + /** + * Transparency is 1. + */ + public static readonly FULL_OPACITY: number = 1; + + /** + * Transparency is 0. + */ + public static readonly ZERO_OPACITY: number = 0; + /** + * font weight is 500. + */ + public static readonly FONT_WEIGHT_FOUR: number = 400; + /** + * The width of the split line is 2. + */ + public static readonly STROKE_WIDTH: number = 2; /** * Width the percentage of the 100. */ @@ -29,6 +46,10 @@ export class CommonConstants { * Height the percentage of the 100. */ public static readonly FULL_HEIGHT: string = '100%'; + /** + * stack height. + */ + public static readonly STACK_HEIGHT: Length = 'calc(100% - 60vp)'; /** * AppStorage key prefix. */ diff --git a/scrollcomponentlibrary/src/main/ets/utils/WindowUtil.ets b/scrollcomponentlibrary/src/main/ets/utils/WindowUtil.ets index 65a9a52f86aab8119d7cce4e1712f6b8d2db8aa7..ea79cf58f704eae4051d767378a3056292ef501c 100644 --- a/scrollcomponentlibrary/src/main/ets/utils/WindowUtil.ets +++ b/scrollcomponentlibrary/src/main/ets/utils/WindowUtil.ets @@ -44,8 +44,6 @@ export class WindowUtil { if (err.code) { return; } - let sysBarProps: window.SystemBarProperties = { statusBarContentColor: '#FFFFFF' }; - data.setWindowSystemBarProperties(sysBarProps); const windowClass: window.Window = data; // Realize the immersive effect. try { diff --git a/scrollcomponentlibrary/src/main/ets/viewmodel/InitData.ets b/scrollcomponentlibrary/src/main/ets/viewmodel/InitData.ets index cf044492379cb9351ef02a7db2dfdc07b815d448..848429592926356516c3631d3f36de60960880e9 100644 --- a/scrollcomponentlibrary/src/main/ets/viewmodel/InitData.ets +++ b/scrollcomponentlibrary/src/main/ets/viewmodel/InitData.ets @@ -18,4 +18,4 @@ */ export const listArr: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', - '22', '23', '24']; \ No newline at end of file + '22', '23', '24','25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38']; \ No newline at end of file diff --git a/scrollcomponentlibrary/src/main/resources/base/element/color.json b/scrollcomponentlibrary/src/main/resources/base/element/color.json index 81279aa6575f3fe6547aabf35842a0972543787d..5794e82b6bfd50d770c797e75f3f0c6295c03866 100644 --- a/scrollcomponentlibrary/src/main/resources/base/element/color.json +++ b/scrollcomponentlibrary/src/main/resources/base/element/color.json @@ -3,6 +3,14 @@ { "name": "start_window_background", "value": "#F1F3F5" + }, + { + "name": "active_font_color", + "value": "#007DFF" + }, + { + "name": "font_color", + "value": "#182431" } ] } \ No newline at end of file diff --git a/scrollcomponentlibrary/src/main/resources/base/element/float.json b/scrollcomponentlibrary/src/main/resources/base/element/float.json index 4c2b7be365f14481e64b85e29b341bfdbfc569a5..f01ca5e17a23e778b3d13c93dd6741291b6478ec 100644 --- a/scrollcomponentlibrary/src/main/resources/base/element/float.json +++ b/scrollcomponentlibrary/src/main/resources/base/element/float.json @@ -35,6 +35,30 @@ { "name": "discover_bottom_padding", "value": "16vp" + }, + { + "name": "bar_width", + "value": "290vp" + }, + { + "name": "bar_height", + "value": "88vp" + }, + { + "name": "divider_width", + "value": "64vp" + }, + { + "name": "title_line_height", + "value": "22vp" + }, + { + "name": "title_margin_top", + "value": "10vp" + }, + { + "name": "title_margin_bottom", + "value": "5vp" } ] } \ No newline at end of file diff --git a/scrollcomponentsample/oh-package.json5 b/scrollcomponentsample/oh-package.json5 index 8fb382e689e58066556d172d3c88bdbdfa3a8819..2c755b35d351529444cdbb7208c39117ff20eebe 100644 --- a/scrollcomponentsample/oh-package.json5 +++ b/scrollcomponentsample/oh-package.json5 @@ -6,6 +6,6 @@ "author": "", "license": "", "dependencies": { - "@ohos_sample/scrollcomponentlibrary": "file:../scrollcomponentlibrary" + "@ohos_samples/scrollcomponentlibrary": "file:../scrollcomponentlibrary" } } \ No newline at end of file diff --git a/scrollcomponentsample/src/main/ets/entryability/EntryAbility.ets b/scrollcomponentsample/src/main/ets/entryability/EntryAbility.ets index 3303143e2db1b804c4c070faccb703ef68e29231..62d56de9a5b06b4919d3ee0972092eb2e1456633 100644 --- a/scrollcomponentsample/src/main/ets/entryability/EntryAbility.ets +++ b/scrollcomponentsample/src/main/ets/entryability/EntryAbility.ets @@ -16,7 +16,7 @@ import { UIAbility } from '@kit.AbilityKit'; import { window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { ScrollComponentController } from '@ohos_sample/scrollcomponentlibrary'; +import { ScrollComponentController } from '@ohos_samples/scrollcomponentlibrary'; const TAG: string = '[EntryAbility]'; diff --git a/scrollcomponentsample/src/main/ets/pages/Index.ets b/scrollcomponentsample/src/main/ets/pages/Index.ets index f09f35bee6fa136dee8ecf4fabdc77c5e3b154fa..56f66f324a8c80631cdc11c9ee53abec9c891cbc 100644 --- a/scrollcomponentsample/src/main/ets/pages/Index.ets +++ b/scrollcomponentsample/src/main/ets/pages/Index.ets @@ -12,7 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ScrollComponentNestedSlidingComponent } from '@ohos_sample/scrollcomponentlibrary' +import { ScrollComponentNestedSlidingComponent } from '@ohos_samples/scrollcomponentlibrary' @Entry @Component