当前位置: 首页 > news >正文

组件轮播与样式结构重用实验

任务一使用“Swiper 轮播组件”对自行选择的图片和文本素材分别进行轮播,且调整对应的“loop”、“autoPlay”“interval”、“vertical”属性,实现不同的轮播效果,使用Swiper 样式自定义,修改默认小圆点和被选中小圆点的尺寸及背景。

任务二自行选择素材,分别使用“@Extend”、“@Styles”和“@Builder”实现结构或样式或事件的重用。

实验一:

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Swiper(){//1.轮播内容Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}//2.设置尺寸(内容会自动拉伸)//tips:给外层设置宽高,未来的子元素都会进行统一的拉伸.width('100%').height(100).loop(true) //是否开启循环.autoPlay(true)  //是否自动播放.interval(4000)  //自动播放时间间隔-4s.vertical(true)  //纵向轮播//定制小圆点.indicator(Indicator.dot()  //小圆点.itemWidth(20)  //默认的宽.itemHeight(5)  //默认的高.color(Color.Gray)  //默认的颜色.selectedItemWidth(30)  //选中的宽.selectedItemHeight(5)  //选中的高.selectedColor(Color.White)  //选中的颜色)}
}

实验二:

//全局 Builder
@Builder
function navItem(icon:ResourceStr,txt:string){Column({space:10}) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(()=>{AlertDialog.show({message:'点击了'+txt})})
}@Entry
@Componentstruct Index {@State message: string = 'Hello World';build() {Row(){Row(){navItem($r('app.media.ic_reuse_01'),'阿里拍卖')navItem($r('app.media.ic_reuse_02'),'菜鸟')navItem($r('app.media.ic_reuse_03'),'芭芭农场')navItem($r('app.media.ic_reuse_04'),'阿里药房')}}}}

参考资料:75-Swiper-轮播图&常用属性&小米案例_哔哩哔哩_bilibili

http://www.dtcms.com/a/163536.html

相关文章:

  • Android开发——实现一个计算器
  • 利用3DMAX + Corona Renderer打造现代住宅逼真效果!
  • DotNet 入门:(一) 环境安装
  • MarkItDown:如何高效将各类文档转换为适合 LLM 处理的 Markdown 格式
  • 进程优先级以及切换调度
  • 得物 小程序 6宫格 分析
  • C++/SDL 进阶游戏开发 —— 双人塔防(代号:村庄保卫战 16)
  • opencv 直方图均衡化
  • AimRT 从零到一:官方示例精讲 —— 三、Executor示例.md
  • 【AI News | 20250429】每日AI进展
  • OpenCV 图形API(71)图像与通道拼接函数-----从图像(GMat)中裁剪出一个矩形区域的操作函数 crop()
  • gitee 如何修改提交代码的邮箱
  • 训练神经网络的批量标准化(使用 PyTorch)
  • 内核常见问题汇总
  • 计算机基础:二进制基础14,二进制加法
  • 某建筑石料用灰岩矿自动化监测
  • 海思vio模块学习
  • Android第五次面试总结之网络篇(修)
  • 【AI】OrinNX上安装RIVA-2.19.0,实现文本转语音
  • 第14讲:科研图表的导出与排版艺术——高质量 PDF、TIFF 输出与投稿规范全攻略!
  • 水安题库:水利水电安全员ABC精选练习题
  • MySQL多表操作
  • HCIE证书失效?续证流程与影响全解析
  • 一个SciPy图像处理案例的全过程
  • 小结:GRE VPN;IPSec
  • 【论文阅读/复现】RT-DETR的网络结构/训练/推理/验证/导出模型
  • 抱佛脚之学SSMSpringMVC数据绑定
  • JavaScript 作用域全面总结
  • Spring MVC 中解决中文乱码问题
  • 近期实践总结