W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
滾動條組件ScrollBar,用于配合可滾動組件使用,如List、Grid、Scroll。
該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標單獨標記該內(nèi)容的起始版本。
ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })
參數(shù):
參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
---|---|---|---|
scroller | 是 | 可滾動組件的控制器。用于與可滾動組件進行綁定。 | |
direction | 否 | 滾動條的方向,控制可滾動組件對應方向的滾動。 默認值:ScrollBarDirection.Vertical | |
state | 否 | 滾動條狀態(tài)。 默認值:BarState.Auto |
ScrollBar組件負責定義可滾動區(qū)域的行為樣式,ScrollBar的子節(jié)點負責定義滾動條的行為樣式。
滾動條組件與可滾動組件通過Scroller進行綁定,且只有當兩者方向相同時,才能聯(lián)動,ScrollBar與可滾動組件僅支持一對一綁定。
- // xxx.ets
- @Entry
- @Component
- struct ScrollBarExample {
- private scroller: Scroller = new Scroller()
- private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
- build() {
- Column() {
- Stack({ alignContent: Alignment.End }) {
- Scroll(this.scroller) {
- Flex({ direction: FlexDirection.Column }) {
- ForEach(this.arr, (item) => {
- Row() {
- Text(item.toString())
- .width('80%')
- .height(60)
- .backgroundColor('#3366CC')
- .borderRadius(15)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .margin({ top: 5 })
- }
- }, item => item)
- }.margin({ right: 15 })
- }
- .width('90%')
- .scrollBar(BarState.Off)
- .scrollable(ScrollDirection.Vertical)
- ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
- Text()
- .width(20)
- .height(100)
- .borderRadius(10)
- .backgroundColor('#C0C0C0')
- }.width(20).backgroundColor('#ededed')
- }
- }
- }
- }
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: