Uni-app是一种跨平台开发框架,可以用来开发多个平台的应用程序。在Uni-app中,可以使用uni-swiper组件制作轮播图。
制作轮播图的步骤如下:
在pages文件夹中创建一个新页面,例如index.vue。
在index.vue中添加uni-swiper组件,如下所示:
- <template>
- <view>
- <uni-swiper :indicator-dots="true" :autoplay="true">
- <uni-swiper-item>
- <image src="../../static/imgs/img1.jpg">image>
- uni-swiper-item>
- <uni-swiper-item>
- <image src="../../static/imgs/img2.jpg">image>
- uni-swiper-item>
- <uni-swiper-item>
- <image src="../../static/imgs/img3.jpg">image>
- uni-swiper-item>
- uni-swiper>
- view>
- template>
在static文件夹中添加轮播图使用的图片。
在样式中设置uni-swiper的高度和宽度,如下所示:
- uni-swiper {
- height: 200px;
- width: 100%;
- }
需要注意的是,uni-swiper组件支持的属性和事件有很多,可以根据需要进行设置。