论坛 › 鸿蒙 › HarmonyOS应用开辟：Swiper（容器组件）

美丽的神话 发表于 2024-8-27 09:54:27

HarmonyOS应用开辟：Swiper（容器组件）

滑块视图容器，提供子组件滑动轮播表现的能力。
   阐明：
该组件从API Version 7开始支持。
子组件

可以包含子组件。
   阐明：
子组件类型：系统组件和自界说组件，支持渲染控制类型（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)
参数：
参数名参数类型必填参数形貌controllerSwiperController否给组件绑定一个控制器，用来控制组件翻页。 属性

除支持通用属性外，还支持以下属性，不支持Menu控制。
名称参数类型形貌indexnumber设置当前在容器中表现的子组件的索引值。
默认值：0
阐明：
设置小于0或大于等于子组件数量时，按照默认值0处理惩罚。
从API version 10开始，该属性支持$$双向绑定变量。autoPlayboolean子组件是否主动播放。
默认值：false
阐明：
loop为false时，主动轮播到最后一页时制止轮播。手势切换后不是最后一页时继承播放。intervalnumber使用主动播放时播放的时间隔断，单位为毫秒。
默认值：3000indicator10+DotIndicator | DigitIndicator | boolean设置可选导航点指示器样式。
- DotIndicator：圆点指示器样式。
- DigitIndicator：数字指示器样式。
- boolean：是否启用导航点指示器。
  默认值：true
  默认类型：DotIndicatorloopboolean是否开启循环。
设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。
默认值：truedurationnumber子组件切换的动画时长，单位为毫秒。
默认值：400verticalboolean是否为纵向滑动。
默认值：falseitemSpacenumber | string设置子组件与子组件之间间隙。
默认值：0
阐明：
不支持设置百分比。displayModeSwiperDisplayMode主轴方向上元素排列的模式，优先以displayCount设置的个数表现，displayCount未设置时本属性见效。
默认值：SwiperDisplayMode.StretchcachedCount8+number设置预加载子组件个数。
默认值：1disableSwipe8+boolean禁用组件滑动切换功能。
默认值：falsecurve8+Curve | string设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考Curve罗列阐明，也可以通过插值盘算模块提供的接口创建自界说的插值曲线对象。
默认值：Curve.LinearindicatorStyle(deprecated){
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
mask?: boolean,
color?: ResourceColor,
selectedColor?: ResourceColor
}设置导航点样式：
- left: 设置导航点间隔Swiper组件左边的间隔。
- top: 设置导航点间隔Swiper组件顶部的间隔。
- right: 设置导航点间隔Swiper组件右边的间隔。
- bottom: 设置导航点间隔Swiper组件底部的间隔。
- size: 设置导航点的直径，不支持设置百分比。默认值：6vp。
- mask: 设置是否表现导航点蒙层样式。
- color: 设置导航点的颜色。
- selectedColor: 设置选中的导航点的颜色。
从API version 8开始支持，从API version 10开始不再维护，建议使用indicator代替。displayCount8+number | string |
SwiperAutoFill10+设置一页内元素表现个数。
默认值：1
阐明：
字符串类型仅支持设置为'auto'，表现效果同SwiperDisplayMode.AutoLinear。
使用number类型且设置小于等于0时，按默认值1表现。
使用number类型时，子组件按照主轴均分Swiper宽度（减去displayCount-1个itemSpace）的方式举行主轴拉伸（收缩）布局。
使用SwiperAutoFill类型时，通过设置一个子组件最小宽度值minSize，会根据Swiper当前宽度和minSize值主动盘算并更改一页内元素表现个数。当minSize为空或者小于等于0时，Swiper表现1列。effectMode8+EdgeEffect边沿滑动效果，loop = false时见效。 现在支持的滑动效果拜见EdgeEffect的罗列阐明。
默认值：EdgeEffect.Spring
阐明：
控制器接口调用时不见效回弹。displayArrow10+value:ArrowStyle | boolean,
isHoverShow?: boolean设置导航点箭头样式。
-value: 支持设置箭头和底板样式，非常场景使用ArrowStyle对象中的默认值。
-isHoverShow：设置鼠标悬停时是否表现箭头。
默认值：false
阐明：
isHoverShow为false时，常驻表现箭头，支持点击翻页。
isHoverShow为true时，只有在鼠标悬停时才会表现箭头，并支持点击翻页。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罗列阐明

名称形貌Stretch(deprecated)Swiper滑动一页的宽度为Swiper组件自身的宽度。
从API version 10开始不再维护，建议使用STRETCH代替。AutoLinear(deprecated)Swiper滑动一页的宽度为子组件宽度中的最大值。
从API version 10开始不再维护，建议使用AUTO_LINEAR代替。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组件间隔。
参数名参数类型必填项参数形貌leftLength否设置导航点间隔Swiper组件左边的间隔。
默认值：0
单位：vptopLength否设置导航点间隔Swiper组件顶部的间隔。
默认值：0
单位：vprightLength否设置导航点间隔Swiper组件右边的间隔。
默认值：0
单位：vpbottomLength否设置导航点间隔Swiper组件底部的间隔。
默认值：0
单位：vp DotIndicator10+

圆点指示器属性及功能继承自Indicator。
参数名参数类型必填项参数形貌itemWidthLength否设置Swiper组件圆点导航指示器的宽，不支持设置百分比。
默认值：6
单位：vpitemHeightLength否设置Swiper组件圆点导航指示器的高，不支持设置百分比。
默认值：6
单位：vpselectedItemWidthLength否设置选中Swiper组件圆点导航指示器的宽，不支持设置百分比。
默认值：12
单位：vpselectedItemHeightLength否设置选中Swiper组件圆点导航指示器的高，不支持设置百分比。
默认值：6
单位：vpmaskboolean否设置是否表现Swiper组件圆点导航指示器的蒙版样式。
默认值：falsecolorResourceColor否设置Swiper组件圆点导航指示器的颜色。
默认值：'#182431'（10%透明度）selectedColorResourceColor否设置选中Swiper组件圆点导航指示器的颜色。
默认值：'#007DFF' DigitIndicator10+

数字指示器属性及功能继承自Indicator。
参数名参数类型必填项参数形貌fontColorResourceColor否设置Swiper组件数字导航点的字体颜色。
默认值：'#ff182431'selectedFontColorResourceColor否设置选中Swiper组件数字导航点的字体颜色。
默认值：'#ff182431'digitFont{
size?:Length
weight?:number | FontWeight | string
}否设置Swiper组件数字导航点的字体样式：
- size：数字导航点指示器的字体大小，不支持设置百分比。
默认值：14vp
- weight：数字导航点指示器的字重。selectedDigitFont{
size?:Length
weight?:number | FontWeight | string
}否设置选中Swiper组件数字导航点的字体样式：
- size：数字导航点选中指示器的字体大小，不支持设置百分比。
默认值：14vp
- weight：数字导航点选中指示器的字重。 ArrowStyle10+

左右箭头属性。
参数名参数类型必填项参数形貌showBackgroundboolean否设置箭头底板是否表现。
默认值：falseisSidebarMiddleboolean否设置箭头表现位置。
默认值：false
默认表现在导航点指示器两侧。backgroundSizeLength否设置底板大小。
在导航点两侧表现：
默认值：24vp
在组件两侧表现：
默认值：32vp
不支持设置百分比。backgroundColorResourceColor否设置底板颜色。
在导航点两侧表现：
默认值：'#00000000'
在组件两侧表现：
默认值：'#19182431'arrowSizeLength否设置箭头大小。
在导航点两侧表现时：
默认值：18vp
在组件两侧表现时：
默认值：24vp
阐明：
showBackground为true时，arrowSize为backgroundSize的3/4。
不支持设置百分比。arrowColorResourceColor否设置箭头颜色。
默认值：'#182431' SwiperAutoFill10+

自顺应属性。
参数名参数类型必填项参数形貌minSizeVP是设置元素表现最小宽度。
默认值：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
}

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)
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .indicator( // 设置圆点导航点样式
      new DotIndicator()
          .itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(15)
          .selectedItemHeight(15)
          .color(Color.Gray)
          .selectedColor(Color.Blue))
      .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 })
}
}
https://img-blog.csdnimg.cn/img_convert/eb7c9c3b39fc2ae7ba1998161e62546d.gif
示例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
}

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 })
}
}
https://img-blog.csdnimg.cn/img_convert/c875c30148f507658a059f8aaaed58c4.gif
最后

有很多小伙伴不知道学习哪些鸿蒙开辟技术？不知道需要重点掌握哪些鸿蒙应用开辟知识点？而且学习时频仍踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开辟必掌握的焦点知识要点，内容包含了（ArkTS、ArkUI开辟组件、Stage模型、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
希望这一份鸿蒙学习资料能够给大家带来资助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（HarmonyOS NEXT）最新学习路线

https://img-blog.csdnimg.cn/direct/8397f7602437445ca63063c2e3c26a6b.png


[*]  HarmonOS根本技能
https://img-blog.csdnimg.cn/direct/72fd2509a44e4bf98bbe1f983b5a4ff6.png


[*]HarmonOS就业必备技能 https://img-blog.csdnimg.cn/direct/18f024bc5f0a4353912996010ed6cc81.png
[*] HarmonOS多媒体技术
https://img-blog.csdnimg.cn/direct/b9ead66dadc245fdadce4d77feb47a28.png


[*]鸿蒙NaPi组件进阶
https://img-blog.csdnimg.cn/direct/0744fbd1454f41b0a3f605fb4a51f5f3.png


[*]HarmonOS高级技能
https://img-blog.csdnimg.cn/direct/743b668910224b259a5ffe804fa6d0db.png


[*]初识HarmonOS内核 https://img-blog.csdnimg.cn/direct/9e79fbdc4bb74f179584c5552aa547d5.png
[*]实战就业级设备开辟
https://img-blog.csdnimg.cn/direct/d2012fa9c57a400da25a2182a38cbdcb.png
有了路线图，怎么能没有学习资料呢，小编也准备了一份团结鸿蒙官方发布条记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开辟入门教学视频，内容包含：ArkTS、ArkUI、Web开辟、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开辟入门教学视频》

https://img-blog.csdnimg.cn/direct/ad3cb3acb77e470fa93ac0471d4e7f0f.png
《鸿蒙生态应用开辟V2.0白皮书》

https://img-blog.csdnimg.cn/img_convert/bf439a395d3ce8e8cf3dee8e8b75e3a9.jpeg
《鸿蒙 (OpenHarmony)开辟根本到实战手册》

OpenHarmony北向、南向开辟环境搭建
https://img-blog.csdnimg.cn/img_convert/aff76dc1c3c84c360a9ff825908b2e98.png
 《鸿蒙开辟根本》



[*]ArkTS语言
[*]安装DevEco Studio
[*]运用你的第一个ArkTS应用
[*]ArkUI声明式UI开辟
[*].……
https://img-blog.csdnimg.cn/img_convert/2b8f290e39e52efb0a5709be96ff82ea.png
 《鸿蒙开辟进阶》



[*]Stage模型入门
[*]网络管理
[*]数据管理
[*]电话服务
[*]分布式应用开辟
[*]通知与窗口管理
[*]多媒体技术
[*]安全技能
[*]任务管理
[*]WebGL
[*]国际化开辟
[*]应用测试
[*]DFX面向未来设计
[*]鸿蒙系统移植和裁剪定制
[*]……
https://img-blog.csdnimg.cn/img_convert/06651107041ecdf7d26caed596ac4302.png
《鸿蒙进阶实战》



[*]ArkTS实践
[*]UIAbility应用
[*]网络案例
[*]……
https://img-blog.csdnimg.cn/img_convert/42bc7f572540ddbbd4d38e5bf3148fce.png
 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结

总的来说，华为鸿蒙不再兼容安卓，对中年步伐员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的期间中立于不败之地。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: HarmonyOS应用开辟：Swiper（容器组件）