色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙ArkTS容器組件:Swiper

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-07-15 09:51 ? 次閱讀

Swiper

滑塊視圖容器,提供子組件滑動輪播顯示的能力。

說明:

該組件從API Version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。

子組件

可以包含子組件。

說明:
開發前請熟悉鴻蒙開發指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
子組件類型:系統組件和自定義組件,支持渲染控制類型([if/else]、[ForEach]和[LazyForEach])。

Swiper子組件的visibility屬性設置為None,Swiper的displayMode屬性設置為SwiperDisplayMode.AutoLinear或displayCount屬性設置為'auto'時,對應子組件在視窗內不占位,但不影響導航點個數。

Swiper子組件的visibility屬性設置為None,或者visibility屬性設置為Hidden時,對應子組件不顯示,但依然會在視窗內占位。

當Swiper子組件個數小于等于Swiper組件內容區內顯示的節點總個數(totalDisplayCount = DisplayCount + prevMargin? (1 : 0 ) + nextMargin? (1 : 0 ))時,按照非循環模式布局處理,此時,前后邊距對應子組件不顯示,但依然會在視窗內占位。Swiper組件按照totalDisplayCount個數判斷測算規格

接口

Swiper(controller?: SwiperController)

參數

參數名參數類型必填參數描述
controller[SwiperController]給組件綁定一個控制器,用來控制組件翻頁。

屬性

除支持[通用屬性]外,還支持以下屬性,不支持[Menu控制]。

名稱參數類型描述
indexnumber設置當前在容器中顯示的子組件的索引值。 默認值:0**說明:**設置小于0或大于等于子組件數量時,按照默認值0處理。 從API version 10開始,該屬性支持[$$]雙向綁定變量。
autoPlayboolean子組件是否自動播放。 默認值:false**說明:**loop為false時,自動輪播到最后一頁時停止輪播。手勢切換后不是最后一頁時繼續播放。
intervalnumber使用自動播放時播放的時間間隔,單位為毫秒。 默認值:3000
indicator10+[DotIndicator][DigitIndicator]
loopboolean是否開啟循環。 設置為true時表示開啟循環,在LazyForEach懶循環加載模式下,加載的組件數量建議大于5個。 默認值:true
durationnumber子組件切換的動畫時長,單位為毫秒。 默認值:400
verticalboolean是否為縱向滑動。 默認值:false
itemSpacenumberstring
displayModeSwiperDisplayMode主軸方向上元素排列的模式,優先以displayCount設置的個數顯示,displayCount未設置時本屬性生效。 默認值:SwiperDisplayMode.STRETCH
cachedCount8+number設置預加載子組件個數。 默認值:1
disableSwipe8+boolean禁用組件滑動切換功能。 默認值:false
curve8+[Curve]string
displayCount8+numberstring
effectMode8+[EdgeEffect]邊緣滑動效果,loop = false時生效。 目前支持的滑動效果參見EdgeEffect的枚舉說明。 默認值:EdgeEffect.Spring**說明:**控制器接口調用時不生效回彈。
displayArrow10+value:[ArrowStyle]boolean, isHoverShow?: boolean
nextMargin10+[Length]后邊距,用于露出后一項的一小部分。 默認值:0**說明:**僅當SwiperDisplayMode為STRETCH模式時生效。 當主軸方向為橫向布局時,nextmargin/prevmargin中任意一個大于子組件測算的寬度,nextmargin和prevmargin均不顯示。 當主軸方向為縱向布局時,nextmargin/prevmargin中任意一個大于子組件測算的高度,nextmargin和prevmargin均不顯示。
prevMargin10+[Length]前邊距,用于露出前一項的一小部分。 默認值:0**說明:**僅當SwiperDisplayMode為STRETCH模式時生效。 當主軸方向為橫向布局時,nextmargin/prevmargin中任意一個大于子組件測算的寬度,prevmargin和nextmargin均不顯示。 當主軸方向為縱向布局時,nextmargin/prevmargin中任意一個大于子組件測算的高度,nextmargin和prevmargin均不顯示。

SwiperDisplayMode枚舉說明

名稱描述
STRETCH10+Swiper滑動一頁的寬度為Swiper組件自身的寬度。
AUTO_LINEAR10+Swiper滑動一頁的寬度為視窗內最左側子組件的寬度。

SwiperController

Swiper容器組件的控制器,可以將此對象綁定至Swiper組件,然后通過它控制翻頁。

showNext

showNext(): void

翻至下一頁。翻頁帶動效切換過程,時長通過duration指定。

showPrevious

showPrevious(): void

翻至上一頁。翻頁帶動效切換過程,時長通過duration指定。

finishAnimation

finishAnimation(callback?: () => void): void

停止播放動畫。

參數:

參數名參數類型必填項參數描述
callback() => void動畫結束的回調。

Indicator10+

設置導航點距離Swiper組件距離。

參數名參數類型必填項參數描述
left[Length]設置導航點距離Swiper組件左邊的距離。 默認值:0 單位:vp
top[Length]設置導航點距離Swiper組件頂部的距離。 默認值:0 單位:vp
right[Length]設置導航點距離Swiper組件右邊的距離。 默認值:0 單位:vp
bottom[Length]設置導航點距離Swiper組件底部的距離。 默認值:0 單位:vp

DotIndicator10+

圓點指示器屬性及功能繼承自Indicator。

參數名參數類型必填項參數描述
itemWidth[Length]設置Swiper組件圓點導航指示器的寬,不支持設置百分比。 默認值:6 單位:vp
itemHeight[Length]設置Swiper組件圓點導航指示器的高,不支持設置百分比。 默認值:6 單位:vp
selectedItemWidth[Length]設置選中Swiper組件圓點導航指示器的寬,不支持設置百分比。 默認值:12 單位:vp
selectedItemHeight[Length]設置選中Swiper組件圓點導航指示器的高,不支持設置百分比。 默認值:6 單位:vp
maskboolean設置是否顯示Swiper組件圓點導航指示器的蒙版樣式。 默認值:false
color[ResourceColor]設置Swiper組件圓點導航指示器的顏色。 默認值:'#182431'(10%透明度)
selectedColor[ResourceColor]設置選中Swiper組件圓點導航指示器的顏色。 默認值:'#007DFF'

DigitIndicator10+

數字指示器屬性及功能繼承自Indicator。

參數名參數類型必填項參數描述
fontColor[ResourceColor]設置Swiper組件數字導航點的字體顏色。 默認值:'#ff182431'
selectedFontColor[ResourceColor]設置選中Swiper組件數字導航點的字體顏色。 默認值:'#ff182431'
digitFont{ size?:[Length]weight?:number[FontWeight]string }
selectedDigitFont{ size?:[Length] weight?:number[FontWeight]string }

ArrowStyle10+

左右箭頭屬性。

參數名參數類型必填項參數描述
showBackgroundboolean設置箭頭底板是否顯示。 默認值:false
isSidebarMiddleboolean設置箭頭顯示位置。 默認值:false 默認顯示在導航點指示器兩側。
backgroundSize[Length]設置底板大小。 在導航點兩側顯示: 默認值:24vp 在組件兩側顯示: 默認值:32vp 不支持設置百分比。
backgroundColor[ResourceColor]設置底板顏色。 在導航點兩側顯示: 默認值:'#00000000' 在組件兩側顯示: 默認值:'#19182431'
arrowSize[Length]設置箭頭大小。 在導航點兩側顯示時: 默認值:18vp 在組件兩側顯示時: 默認值:24vp**說明:**showBackground為true時,arrowSize為backgroundSize的3/4。 不支持設置百分比。
arrowColor[ResourceColor]設置箭頭顏色。 默認值:'#182431'

SwiperAutoFill10+

自適應屬性。

參數名參數類型必填項參數描述
minSize[VP]設置元素顯示最小寬度。 默認值:0

事件

除支持[通用事件]外,還支持以下事件:

名稱功能描述
onChange(event: (index: number) => void)當前顯示的子組件索引變化時觸發該事件,返回值為當前顯示的子組件的索引值。 - index:當前顯示元素的索引。**說明:**Swiper組件結合LazyForEach使用時,不能在onChange事件里觸發子頁面UI的刷新。
onAnimationStart9+(event: (index: number, targetIndex10+: number, extraInfo10+: [SwiperAnimationEvent]) => void)切換動畫開始時觸發該回調。 - index:當前顯示元素的索引。 - targetIndex:切換動畫目標元素的索引。 - extraInfo:動畫相關信息,包括主軸方向上當前顯示元素和目標元素相對Swiper起始位置的位移,以及離手速度。**說明:**參數為動畫開始前的index值(不是最終結束動畫的index值),多列Swiper時,index為最左側組件的索引。
onAnimationEnd9+(event: (index: number, extraInfo: [SwiperAnimationEvent]) => void)切換動畫結束時觸發該回調。 - index:當前顯示元素的索引。 - extraInfo:動畫相關信息,只返回主軸方向上當前顯示元素相對于Swiper起始位置的位移。**說明:**當Swiper切換動效結束時觸發,包括動畫過程中手勢中斷,通過SwiperController調用finishAnimation。參數為動畫結束后的index值,多列Swiper時,index為最左側組件的索引。
onGestureSwipe10+(event: (index: number, extraInfo: [SwiperAnimationEvent]) => void)在頁面跟手滑動過程中,逐幀觸發該回調。 - index:當前顯示元素的索引。 - extraInfo:動畫相關信息,只返回主軸方向上當前顯示元素相對于Swiper起始位置的位移。**說明:**多列Swiper時,index為最左側組件的索引。

示例

示例1

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) = > {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) = > item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(true)
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .displayArrow({
        showBackground: true,
        isSidebarMiddle: true,
        backgroundSize: 24,
        backgroundColor: Color.White,
        arrowSize: 18,
        arrowColor: Color.Blue
      }, false)
      .curve(Curve.Linear)
      .onChange((index: number) = > {
        console.info(index.toString())
      })
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) = > {
        console.info("index: " + index)
        console.info("current offset: " + extraInfo.currentOffset)
      })
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) = > {
        console.info("index: " + index)
        console.info("targetIndex: " + targetIndex)
        console.info("current offset: " + extraInfo.currentOffset)
        console.info("target offset: " + extraInfo.targetOffset)
        console.info("velocity: " + extraInfo.velocity)
      })
      .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) = > {
        console.info("index: " + index)
        console.info("current offset: " + extraInfo.currentOffset)
      })

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() = > {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .onClick(() = > {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

swiper

示例2

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) = > {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) = > item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(Indicator.dot()
        .itemWidth(15)
        .itemHeight(15)
        .selectedItemWidth(15)
        .selectedItemHeight(15)
        .color(Color.Gray)
        .selectedColor(Color.Blue))
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .displayArrow(true, true)

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() = > {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .onClick(() = > {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

swiper

示例3

搜狗高速瀏覽器截圖20240326151547.png

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) = > {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) = > item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(Indicator.digit()
        .right("43%")
        .top(200)
        .fontColor(Color.Gray)
        .selectedFontColor(Color.Gray)
        .digitFont({ size: 20, weight: FontWeight.Bold })
        .selectedDigitFont({ size: 20, weight: FontWeight.Normal }))
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .displayArrow(true, false)

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() = > {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .onClick(() = > {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

swiper

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 組件
    +關注

    關注

    1

    文章

    513

    瀏覽量

    17854
  • 鴻蒙
    +關注

    關注

    57

    文章

    2371

    瀏覽量

    42910
收藏 人收藏

    評論

    相關推薦

    HarmonyOS開發案例:【Swiper的實戰】

    主要介紹了滑動容器組件Swiper的幾種常見的應用場景,包括頂部導航、輪播圖以及視頻滑動播放。
    的頭像 發表于 04-28 14:41 ?1230次閱讀
    HarmonyOS開發案例:【<b class='flag-5'>Swiper</b>的實戰】

    鴻蒙ArkTS容器組件:Column

    沿垂直方向布局的容器
    的頭像 發表于 07-05 16:32 ?480次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:Column

    鴻蒙ArkTS容器組件:Flex

    以彈性方式布局子組件容器組件
    的頭像 發表于 07-08 10:19 ?532次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:Flex

    鴻蒙ArkTS容器組件:FlowItem

    [瀑布流組件]的子組件,用來展示瀑布流具體item。
    的頭像 發表于 07-08 09:56 ?412次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:FlowItem

    鴻蒙ArkTS容器組件:GridCol

    柵格子組件,必須作為柵格容器組件([GridRow])的子組件使用。
    的頭像 發表于 07-08 15:17 ?430次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:GridCol

    鴻蒙ArkTS容器組件:GridItem

    網格容器中單項內容容器
    的頭像 發表于 07-09 09:25 ?436次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:GridItem

    鴻蒙ArkTS容器組件:ListItemGroup

    組件用來展示列表item分組,寬度默認充滿[List]組件,必須配合List組件來使用。
    的頭像 發表于 07-10 09:20 ?715次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:ListItemGroup

    鴻蒙ArkTS容器組件:Navigator

    路由容器組件,提供路由跳轉能力。
    的頭像 發表于 07-10 14:55 ?444次閱讀

    鴻蒙ArkTS容器組件:Refresh

    可以進行頁面下拉操作并顯示刷新動效的容器組件
    的頭像 發表于 07-11 16:11 ?546次閱讀

    鴻蒙ArkTS容器組件:RowSplit

    將子組件橫向布局,并在每個子組件之間插入一根縱向的分割線。
    的頭像 發表于 07-11 22:25 ?357次閱讀

    鴻蒙ArkTS容器組件:Scroll

    可滾動的容器組件,當子組件的布局尺寸超過父組件的尺寸時,內容可以滾動。
    的頭像 發表于 07-12 15:24 ?1263次閱讀

    鴻蒙ArkTS容器組件:SideBarContainer

    提供側邊欄可以顯示和隱藏的側邊欄容器,通過子組件定義側邊欄和內容區,第一個子組件表示側邊欄,第二個子組件表示內容區。
    的頭像 發表于 07-18 15:46 ?575次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:SideBarContainer

    鴻蒙ArkTS容器組件:Stack

    堆疊容器,子組件按照順序依次入棧,后一個子組件覆蓋前一個子組件
    的頭像 發表于 07-15 18:23 ?908次閱讀

    鴻蒙ArkTS容器組件:Tabs

    通過頁簽進行內容視圖切換的容器組件,每個頁簽對應一個內容視圖。
    的頭像 發表于 07-15 09:48 ?862次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:Tabs

    鴻蒙ArkTS容器組件:WaterFlow

    瀑布流容器,由“行”和“列”分割的單元格所組成,通過容器自身的排列規則,將不同大小的“項目”自上而下,如瀑布般緊密布局。
    的頭像 發表于 07-15 17:35 ?458次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>組件</b>:WaterFlow
    主站蜘蛛池模板: 毛片网站在线观看| 涩涩在线视频| 伊人色啪啪天天综合婷婷| 精品欧美18videosex欧美| 亚洲性无码AV久久成人| 久久99国产精品自在自在| 97精品国偷拍自产在线| 日本中文字幕伊人成中文字幕| 国产成人精品视频免费大全| 亚洲国产中文字幕在线视频| 久久综合狠狠综合狠狠| 成人免费毛片观看| 亚洲日韩天堂在线中文字幕| 免费a视频在线观看| 国产a级黄色毛片| 樱桃熟了A级毛片| 日日噜噜大屁股熟妇| 久久成人无码国产免费播放| ping色堂| 一本色道久久综合亚洲精品| 人人澡人人爽人人精品| 激情男女高潮射精AV免费| xhameter中国| 一本道综合久久免费| 日本无卡无吗在线| 久久伊人男人的天堂网站| 国产高清亚洲| 99热在线观看| 亚洲伊人久久网| 视频一区二区三区蜜桃麻豆| 老师你奶真大下面水真多| 国产三级在线观看免费| yellow2019在线观看视频| 一个人免费观看在线视频播放 | 亚洲人日本人jlzzy| 日本护士性生活| 久久婷婷五月免费综合色啪| 国产互换后人妻的疯狂VIDEO| 91嫩草私人成人亚洲影院| 亚洲精品视频免费| 天天国产在线精品亚洲|