鸿蒙Swiper以及模态转场

Swiper:{}    //轮播 滑动 效果
1.适用场景:Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示


2.基本用法:轮播的内容为Swiper的子组件即可  尺寸:设置 Swiper 的尺寸:内容会拉伸为和 Swiper 一致(优先级高)   设置内容尺寸:会将Swiper撑开


3.常用属性:  autoPlay类型是boolean  //子组件是否自动播放。 
interval类型是number  //使用自动播放时播放的时间间隔,单位为毫秒。  
vertical类型是boolean  //是否为纵向滑动。
loop(一般不用)类型是boolean  //是否开启无限循环播放。


4.调整导航点:indicator()    .indicator(false)  // 关闭导航
.indicator(Indicator.dot())  // 圆点指示器(默认)
.indicator(Indicator.digit())  // 数字指示器
.indicator(Indicator.dot()  ?? ??  ) //设置圆点指示器属性,问号是写属性的{
其中left top right bottom可以设置位置默认为0单位是vp
其中itemWidth itemHeight可以设置未选中的默认圆点尺寸默认值为6单位是vp
其中selectedItemWidth selectedItemHeight可以设置选中的圆点尺寸默认值为6单位是vp
其中color selectedColor分别设置未选中的默认圆点颜色和选中圆点颜色 }

模态转场:就是页面中弹出,全屏&半屏的弹框
1.半模态转场:不是全屏的都叫半模态转场
bindSheet:参数isShow: boolean,builder: CustomBuilder,options?: SheetOptions:给组件绑定半模态页面,点击后显示模态页面。
isShow: 是否显示半模态页面。builder: 配置半模态页面内容。options: 配置半模态页面的可选属性。
写法:.bindSheet(this.isShow //真假类型 , this.sheetBuilder() //定义的Builder结构)


2.双向绑定:在非双向绑定情况下,以拖拽方式关闭半模态页面不会改变isShow参数的值,为了使isShow参数值与半模态界面的状态同步,建议使用$$双向绑定isShow参数。


3.可选属性sheetOptions:
.bindSheet(this.isShow //真假类型 , this.sheetBuilder(), //定义的Builder结构{??//写属性})
height:半模态高度   //宽      showClose:是否显示关闭图标   //关闭的叉号     
detents半模态页面的切换高度档位。detents: [1?,?,?]    //切换的高度
dragBar: true或者false    //开关控制条,想要显示控制条得设置切换高度 detents   


4.bindContentCover:写法:.bindContentCover(this.isShow //真假类型 , this.sheetBuilder() //定义的Builder结构),其余都和半模态设置一样
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值