HarmonyOS应用开发快速入门(2)：组件/Swiper和Indicator
src/main/ets/pages/Index.etsclass BannerClass {// 横幅类
id: string = '';// 字符串/编号
imageSrc: ResourceStr = '';// 资源字符串/图片来源
url: string = '';// 字符串/URL
constructor(id: string, imageSrc: ResourceStr, url: string) {
this.id = id;
this.imageSrc = imageSrc;
this.url = url;
}
}
@Entry
@Component
struct Index {// 结构/索引
@State message: string = '快速入门';// 变量/消息
build() {
Column() {// 列方向铺展的对象
Text(this.message)
.fontSize(24)// 字体大小
.fontWeight(700)// 笔画粗细
.width('100%')// 对象的容器的相对宽度
.textAlign(TextAlign.Start)// 对齐方式
.padding({ left: 16 })// 对象的内部的左侧的填充
.fontFamily('HarmonyHeiTi-Bold')// 字体
.lineHeight(30)// 自上向下的行高
Banner()// 横幅的对象
}
.height('100%')// 对象的容器的相对高度
.width('100%')
.backgroundColor('#F1F3F5') // 背景色
}
}
@Preview
@Component
struct Banner {
@State bannerList: Array<BannerClass> = [// 数组/横幅类
new BannerClass('pic0', $r('app.media.banner_pic0'),// 类的实例化
'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'),
new BannerClass('pic1', $r('app.media.banner_pic1'),
'https://developer.huawei.com/consumer/cn/'),
new BannerClass('pic2', $r('app.media.banner_pic2'),
'https://developer.huawei.com/consumer/cn/deveco-studio/'),
new BannerClass('pic3', $r('app.media.banner_pic3'),
'https://developer.huawei.com/consumer/cn/arkts/'),
new BannerClass('pic4', $r('app.media.banner_pic4'),
'https://developer.huawei.com/consumer/cn/arkui/'),
new BannerClass('pic5', $r('app.media.banner_pic5'),
'https://developer.huawei.com/consumer/cn/sdk')
];
build() {
Swiper() {// 滑动和轮播的对象
ForEach(this.bannerList, (item: BannerClass, index: number) => {
Image(item.imageSrc)
.objectFit(ImageFit.Contain)// 图片的适配的方式
.width('100%')/* (列对象没有高度) */
.padding({ top: 11, left: 16, right: 16 })
.borderRadius(16)
}, (item: BannerClass, index: number) => item.id)
}
.autoPlay(true)// 自动轮播
.loop(true)// 循环播放
.indicator(// 指示器
new DotIndicator()// 点状指示器
.color('#1a000000')// 颜色
.selectedColor('#0A59F7')// 选中的颜色
)
}
} src/main/resources/base/media/banner_pic0.png
src/main/resources/base/media/banner_pic1.png
src/main/resources/base/media/banner_pic2.png
src/main/resources/base/media/banner_pic3.png
src/main/resources/base/media/banner_pic4.png
src/main/resources/base/media/banner_pic5.png
https://i-blog.csdnimg.cn/direct/b13d4b658359456d80cb491bf185713c.png
使用Swiper构建运营推荐位-HarmonyOS应用开发快速入门-Codelabs-华为开发者联盟
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]