做网站可以用自己的主机,扁平化网站 psd,网站推广教程分享,域名网站建设鸿蒙#xff08;HarmonyOS#xff09;项目方舟框架#xff08;ArkUI#xff09;之Swiper容器组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1
二、Swiper容器组件
滑块视图容器#xff0c;提供子组件滑动轮播显示的能力。… 鸿蒙HarmonyOS项目方舟框架ArkUI之Swiper容器组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1
二、Swiper容器组件
滑块视图容器提供子组件滑动轮播显示的能力。
子组件
可以包含子组件。
接口
Swiper(controller?: SwiperController)
参数 参数名 参数类型 必填 参数描述 controller SwiperController 否 给组件绑定一个控制器用来控制组件翻页。
属性
除支持通用属性外还支持以下属性 名称 参数类型 描述 index number 设置当前在容器中显示的子组件的索引值。 默认值0 说明 设置小于0或大于等于子组件数量时按照默认值0处理。 autoPlay boolean 子组件是否自动播放。 默认值false 说明 loop为false时自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。 interval number 使用自动播放时播放的时间间隔单位为毫秒。 默认值3000 indicator boolean 是否启用导航点指示器。 默认值true loop boolean 是否开启循环。 设置为true时表示开启循环在LazyForEach懒循环加载模式下加载的组件数量建议大于5个。 默认值true duration number 子组件切换的动画时长单位为毫秒。 默认值400 vertical boolean 是否为纵向滑动。 默认值false itemSpace number | string 设置子组件与子组件之间间隙。 默认值0 说明 不支持设置百分比。 displayMode SwiperDisplayMode 主轴方向上元素排列的模式优先以displayCount设置的个数显示displayCount未设置时本属性生效。 默认值SwiperDisplayMode.Stretch cachedCount8 number 设置预加载子组件个数。 默认值1 disableSwipe8 boolean 禁用组件滑动切换功能。 默认值false curve8 Curve | string 设置Swiper的动画曲线默认为淡入淡出曲线常用曲线参考Curve枚举说明也可以通过插值计算模块提供的接口创建自定义的插值曲线对象。 默认值Curve.Linear indicatorStyle8 { 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: 设置选中的导航点的颜色。 displayCount8 number|string 设置一页内元素显示个数。 默认值1 说明 字符串类型仅支持设置为auto显示效果同SwiperDisplayMode.AutoLinear。 使用number类型且设置小于等于0时按默认值1显示。 使用number类型时子组件按照主轴均分Swiper宽度减去displayCount-1的itemSpace的方式进行主轴拉伸收缩布局。 effectMode8 EdgeEffect 滑动效果目前支持的滑动效果参见EdgeEffect的枚举说明。 默认值EdgeEffect.Spring 说明 控制器接口调用时不生效回弹。
SwiperDisplayMode枚举说明 名称 描述 Stretch Swiper滑动一页的宽度为Swiper组件自身的宽度。 AutoLinear Swiper滑动一页的宽度为子组件宽度中的最大值。
SwiperController Swiper容器组件的控制器可以将此对象绑定至Swiper组件然后通过它控制翻页。
showNext showNext(): void
翻至下一页。翻页带动效切换过程时长通过duration指定。
showPrevious showPrevious(): void
翻至上一页。翻页带动效切换过程时长通过duration指定。
finishAnimation finishAnimation(callback?: () void): void
停止播放动画。
参数 参数名 参数类型 必填项 参数描述 callback () void 否 动画结束的回调。
事件 除支持通用事件外还支持以下事件 名称 功能描述 onChange(event: (index: number) void) 当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。 - index:当前显示元素的索引。 说明 Swiper组件结合LazyForEach使用时不能在onChange事件里触发子页面UI的刷新。 onAnimationStart9(event: (index: number) void) 切换动画开始时触发该回调。 - index:当前显示元素的索引。 说明 参数为动画开始前的index值不是最终结束动画的index值多列Swiper时index为最左侧组件的索引。 onAnimationEnd9(event: (index: number) void) 切换动画结束时触发该回调。 - index:当前显示元素的索引。 说明 当Swiper切换动效结束时触发包括动画过程中手势中断通过SwiperController调用finishAnimatio。参数为动画结束后的index值多列Swiper时index为最左侧组件的索引。
onChange onChange(event: (index: number) void)
当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。
说明Swiper组件结合LazyForEach使用时不能在onChange事件里触发子页面UI的刷新。
返回值 名称 类型 参数描述 index number 当前显示元素的索引。
三、示例
代码
// xxx.ets
class MyDataSource implements IDataSource {private list: number[] []private listener: DataChangeListenerconstructor(list: number[]) {this.list list}totalCount(): number {return this.list.length}getData(index: number): any {return this.list[index]}registerDataChangeListener(listener: DataChangeListener): void {this.listener listener}unregisterDataChangeListener() {}
}Entry
Component
struct SwiperExample {private swiperController: SwiperController new SwiperController()private data: MyDataSource new MyDataSource([])aboutToAppear(): void {let list []for (var i 1; i 10; i) {list.push(i.toString());}this.data new MyDataSource(list)}build() {Column({ space: 5 }) {Swiper(this.swiperController) {LazyForEach(this.data, (item: string) {Text(item).width(90%).height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)}, item item)}.cachedCount(2).index(1).autoPlay(true).interval(4000).indicator(true).loop(true).duration(1000).itemSpace(0).curve(Curve.Linear).onChange((index: number) {console.info(index.toString())})Row({ space: 12 }) {Button(showNext).onClick(() {this.swiperController.showNext()})Button(showPrevious).onClick(() {this.swiperController.showPrevious()})}.margin(5)}.width(100%).margin({ top: 5 })}
} 图例 你有时间常去我家看看我在这里谢谢你啦... 我家地址:亚丁号
最后送大家一首诗:
山高路远坑深, 大军纵横驰奔,
谁敢横刀立马 惟有点赞加关注大军。
