过去几天的文章中我们讲过了如何创建跨平台项目，如何进行基础的布局、如何实现自定义导航栏等等，通过这一系列的文章教程，我们最终要实现一个购物 app，今天我们要做购物应用首页的轮播图部分。
对于轮播图 uniapp 提供了相应的组件 swiper，并且是支持鸿蒙应用的，这样就非常方便了。我们简单写一个有三页内容的轮播图，首先定义轮播图和每一个元素的样式：
.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 为例：
<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>
复制代码
以上就是关于的轮播图的教程分享，感谢您的阅读。
#鸿蒙三方框架 ##Uniapp##购物 #
评论