Uniform List Scrolling, Page Routing Stack Check, Navigation Bar Line, Scroll Conflict, Progress Bar Radius Customization

[Daily HarmonyOS Next Knowledge] Uniform List Scrolling, Page Routing Stack Check, Navigation Bar Line, Scroll Conflict, Progress Bar Radius Customization

1. How to Set Uniform Scrolling for HarmonyOS List Component?

• edgeEffect.None: Sets the edge scrolling effect, supporting spring and shadow effects.
• friction: Sets the friction coefficient, effective when manually sliding the scroll area. It only affects the inertial scrolling process and indirectly influences the chain effect during inertial scrolling.

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#listscroller11%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

2. How to Determine if a Page Exists in the Routing Stack Using HarmonyOS Router?

To check if a Page is active and exists in the routing stack (i.e., whether an Entry component is still alive):

• The router does not support methods to check if a page is in the routing stack. It is recommended to use navigation instead, as router will stop evolving and no new capabilities will be added. In navigation, you can use getAllPathName to obtain the names of all NavDestination pages in the stack.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#getallpathname10

3. How to Add a Horizontal Line to the Top of the Tabs Navigation Bar in HarmonyOS?

To add a horizontal line to the top of the Tabs navigation bar:

• Add a border style. Refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-border-V5

Reference Demo:

.border({
  width: { left: 0, right: 0, top: 3, bottom: 0 },
  color: {left:Color.White, right:Color.White, top: Color.Red, bottom:Color.White},
  style: {
    top: BorderStyle.Solid,
  }
})

4. Touch Scrolling Conflict with Scroll Components in HarmonyOS

When parent component A moves via onTouch events (pull-down/up sliding), and child component B (Scroll, Web, etc.) scrolls simultaneously, how to avoid gesture conflicts:

• Refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-gesture-events-multi-level-gesture-V5

5. How to Customize the Radius of a HarmonyOS Progress Bar?

To customize the radius for ProgressType.Linear and achieve a 16x8 size with a radius of 2:

Reference Demo:

// xxx.ets
@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 20, total: 100, type: ProgressType.Linear })
        .width(200)
        .backgroundColor('#B3E54C')
        .style({ strokeRadius: 0, strokeWidth: 100 ,})
        .color('#917AF9')
        .borderColor('#00000000')
        .borderRadius(20)
        .clip(true)
    }.width('100%').margin({ top: 30 })
  }
}