网站开发团队需要哪些,ppt模板免费下载 素材医疗,求个企业邮箱,做数字艺术设计的网站滑块视图容器#xff0c;提供子组件滑动轮播显示的能力。 说明#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容#xff0c;则采用上角标单独标记该内容的起始版本。 子组件
可以包含子组件。 说明#xff1a; 子组件类型#xff1a;系统组件和自定义组…滑块视图容器提供子组件滑动轮播显示的能力。 说明 该组件从API Version 7开始支持。后续版本如有新增内容则采用上角标单独标记该内容的起始版本。 子组件
可以包含子组件。 说明 子组件类型系统组件和自定义组件支持渲染控制类型if/else、ForEach和LazyForEach。 Swiper子组件的visibility属性设置为NoneSwiper的displayMode属性设置为SwiperDisplayMode.AutoLinear或displayCount属性设置为auto时对应子组件在视窗内不占位但不影响导航点个数。 Swiper子组件的visibility属性设置为None或者visibility属性设置为Hidden时对应子组件不显示但依然会在视窗内占位。 当Swiper子组件个数小于等于Swiper组件内容区内显示的节点总个数(totalDisplayCount DisplayCount prevMargin? (1 : 0 ) nextMargin? (1 : 0 ))时按照非循环模式布局处理此时前后边距对应子组件不显示但依然会在视窗内占位。Swiper组件按照totalDisplayCount个数判断测算规格。 当Swiper子组件设置了offset属性时会按照子组件的层级进行绘制层级高的子组件会覆盖层级低的子组件。例如Swiper包含3个子组件其中第3个子组件设置了offset({ x : 100 })那么在横向循环滑动中第3个子组件会覆盖第1个子组件此时可设置第1个子组件的zIndex属性值大于第3个子组件使第1个子组件层级高于第3个子组件。 接口
Swiper(controller?: SwiperController)
参数
参数名参数类型必填参数描述controllerSwiperController否给组件绑定一个控制器用来控制组件翻页。
属性
除支持通用属性外还支持以下属性不支持Menu控制。
名称参数类型描述indexnumber设置当前在容器中显示的子组件的索引值。 默认值0说明 设置小于0或大于等于子组件数量时按照默认值0处理。 从API version 10开始该属性支持$$双向绑定变量。autoPlayboolean子组件是否自动播放。 默认值false说明 loop为false时自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。intervalnumber使用自动播放时播放的时间间隔单位为毫秒。 默认值3000indicatorDotIndicator10 | DigitIndicator10 | boolean设置可选导航点指示器样式。 - DotIndicator圆点指示器样式。 - DigitIndicator数字指示器样式。 - boolean是否启用导航点指示器。 默认值true 默认类型DotIndicatorloopboolean是否开启循环。 设置为true时表示开启循环在LazyForEach懒循环加载模式下加载的组件数量建议大于5个。 默认值truedurationnumber子组件切换的动画时长单位为毫秒。 默认值400verticalboolean是否为纵向滑动。 默认值falseitemSpacenumber | string设置子组件与子组件之间间隙。 默认值0说明 不支持设置百分比。 类型为number时默认单位vp;类型为string时需要显式指定像素单位如10px。displayModeSwiperDisplayMode主轴方向上元素排列的模式优先以displayCount设置的个数显示displayCount未设置时本属性生效。 默认值SwiperDisplayMode.StretchcachedCount8number设置预加载子组件个数。 默认值1disableSwipe8boolean禁用组件滑动切换功能。 默认值falsecurve8Curve | string | ICurve10设置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代替。displayCount8number | string |SwiperAutoFill10设置一页内元素显示个数。 默认值1说明 字符串类型仅支持设置为auto显示效果同SwiperDisplayMode.AutoLinear。 使用number类型且设置小于等于0时按默认值1显示。 使用number类型时子组件按照主轴均分Swiper宽度减去displayCount-1个itemSpace的方式进行主轴拉伸收缩布局。 使用SwiperAutoFill类型时通过设置一个子组件最小宽度值minSize会根据Swiper当前宽度和minSize值自动计算并更改一页内元素显示个数。当minSize为空或者小于等于0时Swiper显示1列。effectMode8EdgeEffect边缘滑动效果loop false时生效。 目前支持的滑动效果参见EdgeEffect的枚举说明。 默认值EdgeEffect.Spring说明 控制器接口调用时不生效回弹。displayArrow10value:ArrowStyle | boolean, isHoverShow?: boolean设置导航点箭头样式。 -value: 支持设置箭头和底板样式异常场景使用ArrowStyle对象中的默认值。 -isHoverShow设置鼠标悬停时是否显示箭头。 默认值false说明 isHoverShow为false时常驻显示箭头支持点击翻页。 isHoverShow为true时只有在鼠标悬停时才会显示箭头并支持点击翻页。nextMargin10Length后边距用于露出后一项的一小部分。 默认值0说明 仅当SwiperDisplayMode为STRETCH模式时生效。 当主轴方向为横向布局时nextmargin/prevmargin中任意一个大于子组件测算的宽度nextmargin和prevmargin均不显示。 当主轴方向为纵向布局时nextmargin/prevmargin中任意一个大于子组件测算的高度nextmargin和prevmargin均不显示。prevMargin10Length前边距用于露出前一项的一小部分。 默认值0说明 仅当SwiperDisplayMode为STRETCH模式时生效。 当主轴方向为横向布局时nextmargin/prevmargin中任意一个大于子组件测算的宽度prevmargin和nextmargin均不显示。 当主轴方向为纵向布局时nextmargin/prevmargin中任意一个大于子组件测算的高度nextmargin和prevmargin均不显示。nestedScroll11SwiperNestedScrollMode设置Swiper组件和父组件的嵌套滚动模式。 默认值SwiperNestedScrollMode.SELF_ONLY说明 loop为true时Swiper组件没有边缘不会触发父组件嵌套滚动。
SwiperDisplayMode枚举说明
名称描述Stretch(deprecated)Swiper滑动一页的宽度为Swiper组件自身的宽度。 从API version 10开始不再维护建议使用STRETCH代替。AutoLinear(deprecated)Swiper滑动一页的宽度为子组件宽度中的最大值。 从API version 10开始不再维护建议使用AUTO_LINEAR代替。STRETCH10Swiper滑动一页的宽度为Swiper组件自身的宽度。AUTO_LINEAR10Swiper滑动一页的宽度为视窗内最左侧子组件的宽度。
SwiperNestedScrollMode11枚举说明
名称描述SELF_ONLYSwiper只自身滚动不与父组件联动。SELF_FIRSTSwiper自身先滚动自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后如果父组件有边缘效果则父组件触发边缘效果否则Swiper触发边缘效果。
SwiperController
Swiper容器组件的控制器可以将此对象绑定至Swiper组件可以通过它控制翻页。
导入对象
let controller: SwiperController new SwiperController()
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 单位vpstatic dot无否返回一个DotIndicator对象。static digit无否返回一个DigitIndicator对象。
DotIndicator10
圆点指示器属性及功能继承自Indicator。
参数名参数类型必填项参数描述itemWidthLength否设置Swiper组件圆点导航指示器的宽不支持设置百分比。 默认值6 单位vpitemHeightLength否设置Swiper组件圆点导航指示器的高不支持设置百分比。 默认值6 单位vpselectedItemWidthLength否设置选中Swiper组件圆点导航指示器的宽不支持设置百分比。 默认值12 单位vpselectedItemHeightLength否设置选中Swiper组件圆点导航指示器的高不支持设置百分比。 默认值6 单位vpmaskboolean否设置是否显示Swiper组件圆点导航指示器的蒙版样式。 默认值falsecolorResourceColor否设置Swiper组件圆点导航指示器的颜色。 默认值#18243110%透明度selectedColorResourceColor否设置选中Swiper组件圆点导航指示器的颜色。 默认值#007DFF 说明 按压导航点时导航点会放大至1.33倍显示因此非按压态时导航点的可见范围边界至实际范围边界存在一定距离该距离会随着itemWidth、itemHeight、selectedItemWidth、selectedItemHeight等参数变大而变大。 DigitIndicator10
数字指示器属性及功能继承自Indicator。
参数名参数类型必填项参数描述fontColorResourceColor否设置Swiper组件数字导航点的字体颜色。 默认值#ff182431selectedFontColorResourceColor否设置选中Swiper组件数字导航点的字体颜色。 默认值#ff182431digitFont{ 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 在组件两侧显示 默认值#19182431arrowSizeLength否设置箭头大小。 在导航点两侧显示时 默认值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[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).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 })}
} 示例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.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 })}
} 最后有很多小伙伴不知道学习哪些鸿蒙开发技术不知道需要重点掌握哪些鸿蒙应用开发知识点而且学习时频繁踩坑最终浪费大量时间。所以有一份实用的鸿蒙HarmonyOS NEXT资料用来跟着学习是非常有必要的。
这份鸿蒙HarmonyOS NEXT资料包含了鸿蒙开发必掌握的核心知识要点内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等鸿蒙HarmonyOS NEXT技术知识点。
希望这一份鸿蒙学习资料能够给大家带来帮助有需要的小伙伴自行领取限时开源先到先得~无套路领取
获取这份完整版高清学习路线请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙HarmonyOS NEXT最新学习路线 HarmonOS基础技能 HarmonOS就业必备技能 HarmonOS多媒体技术 鸿蒙NaPi组件进阶 HarmonOS高级技能 初识HarmonOS内核 实战就业级设备开发 有了路线图怎么能没有学习资料呢小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙OpenHarmony 学习手册共计1236页与鸿蒙OpenHarmony 开发入门教学视频内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》 《鸿蒙生态应用开发V2.0白皮书》 《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建 《鸿蒙开发基础》
ArkTS语言安装DevEco Studio运用你的第一个ArkTS应用ArkUI声明式UI开发.…… 《鸿蒙开发进阶》
Stage模型入门网络管理数据管理电话服务分布式应用开发通知与窗口管理多媒体技术安全技能任务管理WebGL国际化开发应用测试DFX面向未来设计鸿蒙系统移植和裁剪定制…… 《鸿蒙进阶实战》
ArkTS实践UIAbility应用网络案例…… 获取以上完整鸿蒙HarmonyOS学习资料请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说华为鸿蒙不再兼容安卓对中年程序员来说是一个挑战也是一个机会。只有积极应对变化不断学习和提升自己他们才能在这个变革的时代中立于不败之地。
