一個ip做幾個網(wǎng)站嗎廈門seo顧問屈興東
鴻蒙（HarmonyOS）項目方舟框架（ArkUI）之Scroll容器組件
一、操作環(huán)境
操作系統(tǒng):? Windows 10 專業(yè)版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+
二、Scroll容器組件
可滾動的容器組件，當子組件的布局尺寸超過父組件的尺寸時，內(nèi)容可以滾動。
子組件
支持單個子組件。
接口
Scroll(scroller?: Scroller)
參數(shù)：
| 參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
|---|---|---|---|
| scroller | Scroller | 否 | 可滾動組件的控制器。用于與可滾動組件進行綁定。 |
屬性
除支持通用屬性外，還支持以下屬性：
| 名稱 | 參數(shù)類型 | 描述 |
|---|---|---|
| scrollable | ScrollDirection | 設置滾動方向。 默認值：ScrollDirection.Vertical |
| scrollBar | BarState | 設置滾動條狀態(tài)。 默認值：BarState.Auto 說明： 如果容器組件無法滾動，則滾動條不顯示。 如果容器組件的子組件大小為無窮大，則滾動條不支持拖動和伴隨滾動。 |
| scrollBarColor | string | number |?Color | 設置滾動條的顏色。 |
| scrollBarWidth | string | number | 設置滾動條的寬度，不支持百分比設置。 默認值：4 單位：vp 說明： 如果滾動條的寬度超過其高度，則滾動條的寬度會變?yōu)槟J值。 |
| edgeEffect | EdgeEffect | 設置滑動效果，目前支持的滑動效果參見EdgeEffect的枚舉說明。 默認值：EdgeEffect.None |
ScrollDirection枚舉說明
| 名稱 | 描述 |
|---|---|
| Horizontal | 僅支持水平方向滾動。 |
| Vertical | 僅支持豎直方向滾動。 |
| None | 不可滾動。 |
| Free(deprecated) | 支持豎直或水平方向滾動。 從API version 9開始廢棄。 |
事件
| 名稱 | 功能描述 |
|---|---|
| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | 每幀開始滾動時觸發(fā)，事件參數(shù)傳入即將發(fā)生的滾動量，事件處理函數(shù)中可根據(jù)應用場景計算實際需要的滾動量并作為事件處理函數(shù)的返回值返回，Scroll將按照返回值的實際滾動量進行滾動。 - offset：即將發(fā)生的滾動量。 - state：當前滾動狀態(tài)。 - offsetRemain：實際滾動量。 觸發(fā)該事件的條件 ： 1、滾動組件觸發(fā)滾動時觸發(fā)，包括鍵鼠操作等其他觸發(fā)滾動的輸入設置。 2、調(diào)用控制器接口時不觸發(fā)。 3、越界回彈不觸發(fā)。 說明： 支持offsetRemain為負值。 若通過onScrollFrameBegin事件和scrollBy方法實現(xiàn)容器嵌套滾動，需設置子滾動節(jié)點的EdgeEffect為None。如Scroll嵌套List滾動時，List組件的edgeEffect屬性需設置為EdgeEffect.None。 |
| onScroll(event: (xOffset: number, yOffset: number) => void) | 滾動事件回調(diào), 返回滾動時水平、豎直方向偏移量。 觸發(fā)該事件的條件 ： 1、滾動組件觸發(fā)滾動時觸發(fā)，支持鍵鼠操作等其他觸發(fā)滾動的輸入設置。2、通過滾動控制器API接口調(diào)用。 3、越界回彈。 |
| onScrollEdge(event: (side: Edge) => void) | 滾動到邊緣事件回調(diào)。 觸發(fā)該事件的條件 ： 1、滾動組件滾動到邊緣時觸發(fā)，支持鍵鼠操作等其他觸發(fā)滾動的輸入設置。 2、通過滾動控制器API接口調(diào)用。 3、越界回彈。 |
| onScrollEnd(deprecated) (event: () => void) | 滾動停止事件回調(diào)。 該事件從API version 9開始廢棄，使用onScrollStop事件替代。 觸發(fā)該事件的條件 ： 1、滾動組件觸發(fā)滾動后停止，支持鍵鼠操作等其他觸發(fā)滾動的輸入設置。 2、通過滾動控制器API接口調(diào)用后停止，帶過渡動效。 |
| onScrollStart9+(event: () => void) | 滾動開始時觸發(fā)。手指拖動Scroll或拖動Scroll的滾動條觸發(fā)的滾動開始時，會觸發(fā)該事件。使用Scroller滾動控制器觸發(fā)的帶動畫的滾動，動畫開始時會觸發(fā)該事件。 |
| onScrollStop9+(event: () => void) | 滾動停止時觸發(fā)。手拖動Scroll或拖動Scroll的滾動條觸發(fā)的滾動，手離開屏幕并且滾動停止時會觸發(fā)該事件。使用Scroller滾動控制器觸發(fā)的帶動畫的滾動，動畫停止時會觸發(fā)該事件。 |
NOTE
若通過onScrollFrameBegin事件和scrollBy方法實現(xiàn)容器嵌套滾動，需設置子滾動節(jié)點的EdgeEffect為None。如Scroll嵌套List滾動時，List組件的edgeEffect屬性需設置為EdgeEffect.None。
Scroller
可滾動容器組件的控制器，可以將此組件綁定至容器組件，然后通過它控制容器組件的滾動，同一個控制器不可以控制多個容器組件，目前支持綁定到List、Scroll、ScrollBar、Grid、WaterFlow上。
導入對象
- scroller: Scroller = new Scroller()
scrollTo
scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration: number, curve: Curve } }): void
滑動到指定位置。
參數(shù)：
| 參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
|---|---|---|---|
| xOffset | number | string | 是 | 水平滑動偏移。 說明： 該參數(shù)值不支持設置百分比。 當值小于0時，不帶動畫的滾動，按0處理。帶動畫的滾動，滾動到起始位置后停止。 僅滾動軸為x軸時生效。 |
| yOffset | number | string | 是 | 垂直滑動偏移。 說明： 該參數(shù)值不支持設置百分比。 當值小于0時，不帶動畫的滾動，按0處理。帶動畫的滾動，滾動到起始位置后停止。 僅滾動軸為y軸時生效。 |
| animation | { duration: number, curve:?Curve } | 否 | 動畫配置： - duration: 滾動時長設置。 - curve: 滾動曲線設置。 默認值： { duration: 0, curve: Curve.Ease } 說明： 設置為小于0的值時，按默認值顯示。 |
scrollEdge
scrollEdge(value: Edge): void
滾動到容器邊緣，不區(qū)分滾動軸方向，Edge.Top和Edge.Start表現(xiàn)相同，Edge.Bottom和Edge.End表現(xiàn)相同。
參數(shù)：
| 參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
|---|---|---|---|
| value | Edge | 是 | 滾動到的邊緣位置。 |
scrollPage
scrollPage(value: { next: boolean, direction?: Axis }): void
滾動到下一頁或者上一頁。
參數(shù)：
| 參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
|---|---|---|---|
| next | boolean | 是 | 是否向下翻頁。true表示向下翻頁，false表示向上翻頁。 |
| direction(deprecated) | Axis | 否 | 設置滾動方向為水平或豎直方向。 從API version 9開始廢棄 |
currentOffset
currentOffset(): { xOffset: number, yOffset: number }
返回當前的滾動偏移量。
返回值
| 類型 | 描述 |
|---|---|
| { xOffset: number, yOffset: number } | xOffset: 水平滑動偏移; yOffset: 豎直滑動偏移。 說明： 返回值單位為vp。 |
scrollToIndex
scrollToIndex(value: number): void
滑動到指定Index。
NOTE
僅支持Grid、List組件。
參數(shù)：
| 參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
|---|---|---|---|
| value | number | 是 | 要滑動到的列表項在列表中的索引值。 |
scrollBy9+
scrollBy(dx: Length, dy: Length): void
滑動指定距離。
NOTE
支持Scroll、List、Grid、WaterFlow組件
參數(shù)：
| 參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
|---|---|---|---|
| dx | Length | 是 | 水平方向滾動距離，不支持百分比形式。 |
| dy | Length | 是 | 豎直方向滾動距離，不支持百分比形式。 |
三、示例
代碼
// xxx.ets
@Entry
@Component
struct ScrollExample {scroller: Scroller = new Scroller()private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]build() {Stack({ alignContent: Alignment.TopStart }) {Scroll(this.scroller) {Column() {ForEach(this.arr, (item) => {Text(item.toString()).width('90%').height(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({ top: 10 })}, item => item)}.width('100%')}.scrollable(ScrollDirection.Vertical) // 滾動方向縱向.scrollBar(BarState.On) // 滾動條常駐顯示.scrollBarColor(Color.Gray) // 滾動條顏色.scrollBarWidth(10) // 滾動條寬度.edgeEffect(EdgeEffect.None).onScroll((xOffset: number, yOffset: number) => {console.info(xOffset + ' ' + yOffset)}).onScrollEdge((side: Edge) => {console.info('To the edge')}).onScrollEnd(() => {console.info('Scroll Stop')})Button('scroll 150').onClick(() => { // 點擊后下滑指定距離150.0vpthis.scroller.scrollBy(0,150)}).margin({ top: 10, left: 20 })Button('scroll 100').onClick(() => { // 點擊后滑動到指定位置，即下滑100.0vp的距離this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })}).margin({ top: 60, left: 20 })Button('back top').onClick(() => { // 點擊后回到頂部this.scroller.scrollEdge(Edge.Top)}).margin({ top: 110, left: 20 })Button('next page').onClick(() => { // 點擊后滑到下一頁this.scroller.scrollPage({ next: true })}).margin({ top: 170, left: 20 })}.width('100%').height('100%').backgroundColor(0xDCDCDC)}
}圖例
你有時間常去我家看看我在這里謝謝你啦...
我家地址:亞丁號
最后送大家一首詩:
山高路遠坑深,
大軍縱橫馳奔,
誰敢橫刀立馬？
惟有點贊加關注大軍。