企业官网建设流程全解析

做视频网站玩什么配置,北京专业seo,软件开发文档编写流程,单位网站建设典型材料#x1f966; 鸿蒙学习实战之路-Swiper 轮播组件全攻略 最近好多朋友问我#xff1a;“鸿蒙里的轮播图怎么搞啊#xff1f;是不是和前端的 Swiper 差不多#xff1f;” 哎#xff0c;这你可问对人了#xff01;作为一个把 npm install 炒成 ohpm install 的前端厨子_ 鸿蒙学习实战之路-Swiper 轮播组件全攻略最近好多朋友问我“鸿蒙里的轮播图怎么搞啊是不是和前端的 Swiper 差不多” 哎这你可问对人了作为一个把npm install炒成ohpm install的前端厨子_今天我就手把手带你搞定 HarmonyOS 里的 Swiper 轮播组件咱们今天的目标很明确从 Swiper 的基本用法到高级定制再到实际案例包教包会全程实操没有虚的一、Swiper 组件是什么Swiper 组件提供滑动轮播显示的能力本身是一个容器组件当设置了多个子组件后可以对这些子组件进行轮播显示。你可以把它理解为前端的 Swiper 插件但更原生、更贴合 HarmonyOS 的声明式 UI 体系。看看这些常见的使用场景二、Swiper 基本用法1. 设置轮播内容和尺寸轮播内容很简单直接作为 Swiper 的子组件即可。尺寸有两种设置方式设置 Swiper 的尺寸内容会拉伸为和 Swiper 一致优先级高设置内容尺寸会将 Swiper 撑开Entry Component struct SwiperBasic { build() { Column() { Text(Swiper基本使用) .fontSize(20) .fontWeight(900) .padding(10) Swiper() { Text( 西兰花) .textAlign(TextAlign.Center) .backgroundColor(Color.Red) .fontColor(Color.White) .fontSize(30) Text( 西红柿) .textAlign(TextAlign.Center) .backgroundColor(Color.Green) .fontColor(Color.White) .fontSize(30) Text( 胡萝卜) .textAlign(TextAlign.Center) .backgroundColor(Color.Blue) .fontColor(Color.White) .fontSize(30) } .width(100%) .height(100) } .width(100%) .height(100%) } }运行效果就是这样滴西兰花小贴士建议优先设置 Swiper 的尺寸这样可以更好地控制轮播区域的大小避免内容撑开导致的布局问题。三、Swiper 常用属性设置了基础内容后咱们来看看一些高频使用的属性属性名类型说明默认值loopboolean是否开启循环。在 LazyForEach 模式下建议组件数量大于 5 个trueautoPlayboolean是否自动播放falseintervalnumber自动播放时间间隔毫秒3000verticalboolean是否纵向滑动false咱们来试试这些属性的效果把轮播图调整为自动播放、4 秒间隔、纵向滑动Entry Component struct SwiperAttributes { build() { Column() { Text(Swiper常用属性) .fontSize(20) .fontWeight(900) .padding(10) Swiper() { Text(0) .textAlign(TextAlign.Center) .backgroundColor(Color.Red) .fontColor(Color.White) .fontSize(30) Text(1) .textAlign(TextAlign.Center) .backgroundColor(Color.Green) .fontColor(Color.White) .fontSize(30) Text(2) .textAlign(TextAlign.Center) .backgroundColor(Color.Blue) .fontColor(Color.White) .fontSize(30) } .width(100%) .height(160) .loop(false) // 是否开启循环 .autoPlay(true) // 自动播放 .interval(4000) // 4秒切换一次 .vertical(true) // 纵向滑动 } .width(100%) .height(100%) } }效果如下西兰花警告当 loop 为 false 时自动轮播到最后一页会停止但如果用户手动滑动后只要不是最后一页就会继续自动播放哦别问我怎么知道的都是泪…四、导航点的调整默认的导航点可能不符合你的设计需求没关系咱们可以自定义导航点的调整主要分两类显示或隐藏导航点类型圆点指示器重点掌握数字指示器了解即可1. 基础控制Swiper() { // 轮播内容 } // .indicator(false) // 关闭导航点 // .indicator(Indicator.dot()) // 圆点指示器默认 // .indicator(Indicator.digit()) // 数字指示器2. 自定义圆点导航点日常开发中最常用的就是圆点指示器咱们重点掌握如何调整它位置属性left/top/right/bottom设置导航点距离 Swiper 边缘的距离样式属性itemWidth/itemHeight默认指示器的宽高selectedItemWidth/selectedItemHeight选中指示器的宽高color默认指示器颜色selectedColor选中指示器颜色来个实际例子Entry Component struct SwiperIndicator { build() { Column() { Text(Swiper导航点自定义) .fontSize(20) .fontWeight(900) .padding(10) Swiper() { Text(0) .textAlign(TextAlign.Center) .backgroundColor(Color.Red) .fontColor(Color.White) .fontSize(30) Text(1) .textAlign(TextAlign.Center) .backgroundColor(Color.Green) .fontColor(Color.White) .fontSize(30) Text(2) .textAlign(TextAlign.Center) .backgroundColor(Color.Blue) .fontColor(Color.White) .fontSize(30) } .width(100%) .height(160) .indicator( Indicator.dot() .left(10) // 左侧距离 .bottom(10) // 底部距离 .itemWidth(20) // 默认指示器宽度 .itemHeight(20) // 默认指示器高度 .selectedItemWidth(30) // 选中指示器宽度 .selectedItemHeight(30) // 选中指示器高度 .selectedColor(Color.Yellow) // 选中颜色 .color(Color.Blue) // 默认颜色 ) } .width(100%) .height(100%) } }调整后的效果西兰花小贴士导航点的位置属性可以组合使用不需要全部设置。比如想把导航点放在右下角只需要设置.right(10)和.bottom(10)就可以啦五、实战案例-小米有品轮播图光说不练假把式咱们来实现一个小米有品首页的轮播效果代码中的图片素材可以替换为任意的内容需求分析宽高100%、160循环播放、自动轮播间隔 4 秒圆点指示器选中颜色白色选中宽高30、4默认宽高10、4实现代码Entry Component struct SwiperXiaomiCase { build() { Column() { Text(Swiper案例-小米有品) .fontSize(20) .fontWeight(900) .padding(10) Swiper() { // 注意这里的图片资源需要在你的项目中添加 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)) } .width(100%) .height(160) .loop(true) // 开启循环 .autoPlay(true) // 自动播放 .interval(4000) // 4秒间隔 .indicator( Indicator.dot() .bottom(10) // 距离底部10vp .selectedColor(Color.White) // 选中颜色白色 .selectedItemWidth(30) // 选中宽度30vp .selectedItemHeight(4) // 选中高度4vp .itemWidth(10) // 默认宽度10vp .itemHeight(4) // 默认高度4vp .color(#88FFFFFF) // 默认颜色半透明白色 ) } .width(100%) .height(100%) } }实现效果西兰花警告别忘记在你的项目资源文件夹里添加对应的轮播图片哦可以去小米有品官网找几张样图或者用自己的图片代替。六、总结与技巧重点回顾基本用法Swiper 作为容器组件子组件即为轮播内容核心属性loop循环、autoPlay自动播放、interval间隔、vertical方向导航点支持圆点和数字两种类型可自定义位置和样式实战案例通过小米有品轮播图掌握综合应用高级技巧懒加载结合 LazyForEach 使用可以高效加载大量轮播内容事件监听可以监听 change 事件实现轮播切换时的联动效果手势控制支持触摸滑动用户体验更好西兰花小贴士当轮播内容很多时记得使用 LazyForEach 懒加载这样可以提高性能避免一次性加载所有内容导致的卡顿 下一步行动今天咱们搞定了 Swiper 轮播组件是不是超简单o(╯□╰)o 其实鸿蒙里的很多组件都和前端有相似之处只要掌握了规律学习起来并不难推荐资料官方文档Swiper 组件组件参考Swiper API我是盐焗西兰花不教理论只给你能跑的代码和避坑指南。下期见