鸿蒙开发DE中Swiper组件和Grid组件的基本使用

本文链接：https://blog.youkuaiyun.com/HarmonyOS007/article/details/141306887

一.Swiper组件的功能

Swiper组件提供了滑动轮播显示的能力。当内部设置了多个子组件后可以对这些子组件进行轮播显示。

例如：

设置尺寸

①直接设置Swiper容器尺寸（子组件会自动拉伸铺满容器内部（优先级高））

②设置内部子组件的尺寸（会给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()
 })
 }
 }
}

效果图：