一.Swiper组件的功能
例如:
Swiper() {
// 轮播内容
// (设置尺寸,撑开swiper)
}
// 设置尺寸(内容拉伸、优先级高)
.width('100%')
.height(100)
属性名 | 类型 | 说明 |
---|---|---|
loop | boolean | 是否开启循环。设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。默认值:true |
autoPlay | boolean | 子组件是否自动播放。默认值:false。说明:loop为false时,自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。 |
interval | number | 使用自动播放时播放的时间间隔,单位为毫秒。默认值:3000 |
vertical | boolean | 是否为纵向滑动。默认值:false |
更多属性参考文档[Swiper-容器组件-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者
-
绑定按钮控制轮播图上一页下一页
代码演示 :
@Entry
@Component
struct xmyp {
controller =new SwiperController() //new一个Swiper的控制器
build() {
Column(){
Swiper(this.controller){ //给Swiper组件绑定上控制器
Image('/images/ic_swiper_xmyp01.jpeg')
Image('/images/ic_swiper_xmyp02.jpeg')
Image('/images/ic_swiper_xmyp03.jpeg')
Image('/images/ic_swiper_xmyp04.jpeg')
}
.height(160)
.width('100%')
.autoPlay(true)
.indicator(Indicator.dot()
.selectedItemWidth(30)
.selectedItemHeight(4)
.itemWidth(10)
.itemHeight(4)
.selectedColor(Color.White)
.color(Color.Black))
Button('上一页') //给按钮添加上点击事件
.onClick(()=>{
{
this.controller.showNext()
}})
Button('下一页')
.onClick(()=>{
this.controller.showNext()
})
}
}
}
效果图:
二.Grid组件的功能
功能:布局是很多行和列组成的,可能需要合并或者滚动就可以使用Grid组件
①如果给行列设定固定的几行几列(不滚动)
②合并行或者列 (不滚动)
生成以下效果: