Uniapp开发鸿蒙购物项目实战教程：实现首页轮播图
【摘要】 过去几天的文章中我们讲过了如何创建跨平台项目，如何进行基础的布局、如何实现自定义导航栏等等，通过这一系列的文章教程，我们最终要实现一个购物app，今天我们要做购物应用首页的轮播图部分。对于轮播图uniapp提供了相应的组件swiper，并且是支持鸿蒙应用的，这样就非常方便了。我们简单写一个有三页内容的轮播图，首先定义轮播图和每一个元素的样式：.swiper{width: 100%;heigh...
.swiper{
width: 100%;
height: 140px;
}
.swiper-item{
width: 100%;
height: 100%;
display: block;
}<swiper class="swiper">
<swiper-item>
<view class="swiper-item" style="background-color: red;">1</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" style="background-color: yellow;">2</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" style="background-color: green;">3</view>
</swiper-item>
</swiper>
<swiper-item>
<view class="swiper-item" >
<image src="/static/banner1.jpg" style="width: 100%;height: 100%;"></image>
</view>
</swiper-item>
indicator-dots：是否显示面板指示点
indicator-color： 指示点颜色
indicator-active-color： 当前选中的指示点颜色
autoplay：是否自动切换
interval：自动切换时间间隔下面放上以上属性的正确使用方法，以及轮播图的完整代码：
<swiper class="swiper" indicator-dots="true" indicator-color="#f8f8f8" indicator-active-color="#007aff" duration="3000" autoplay="true">
<swiper-item>
<view class="swiper-item" >
<image src="/static/banner1.jpg" style="width: 100%;height: 100%;"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" >
<image src="/static/banner2.jpg" style="width: 100%;height: 100%;"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" >
<image src="/static/banner3.jpg" style="width: 100%;height: 100%;"></image>
</view>
</swiper-item>
</swiper>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）