HarmonyOS鸿蒙学习笔记(8)Swiper实现轮播滚动效果

HarmonyOS提供了Swiper组件实现轮播图效果: HarmonyOS鸿蒙学习笔记(8)Swiper实现轮播滚动效果 实现代码如下:

Swiper() { Image($rawfile(‘computer/computer1.png‘)) .height(200) .width(‘100%‘) Image($rawfile(‘computer/computer2.png‘)) .height(200) .width(‘100%‘) Image($rawfile(‘computer/computer3.png‘)) .height(200) .width(‘100%‘) Image($rawfile(‘computer/computer4.png‘)) .height(200) .width(‘100%‘) } .index(0) .autoPlay(true)//自动播放 .interval(2000) .indicatorStyle({ color: Color.Gray,//未选中的颜色 selectedColor:Color.Red//设置选中的导航点的颜色。 }) .loop(true)//开启循环轮播 .height(250) .width(‘100%‘)

如果想让导航点在上面展示(如下图),该怎么办呢? HarmonyOS鸿蒙学习笔记(8)Swiper实现轮播滚动效果 很简单,修改indicatorStyle的top值,代码如下:

.indicatorStyle({ color: Color.Gray,//未选中的颜色 selectedColor:Color.Red,//设置选中的导航点的颜色。 top:0//设置导航点距离Swiper组件顶部的距离。 })

另外indicatorStyle的top和bottom属性感觉有点迷惑,设置了大于0的值感觉达不到理论计算的位置。

参考资料: Swiper官方说明 Swiper官方示例

极客网企业会员

免责声明:本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,读者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时,应及时向本网站提出书面权利通知或不实情况说明,并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后,将会依法尽快联系相关文章源头核实,沟通删除相关内容或断开相关链接。