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结构),其余都和半模态设置一样