小程序轮播图
今天给大家分享一个在微信开发者工具开发微信小程序的简单案例——轮播图(只用wxml和wxss)
话不多说,直接上代码!!!
效果图
WXML代码
基本属性介绍
<!-- indicator-dots 是否显示面板 -->
<!-- circular 衔接滑动 -->
<!-- autoplay 是否自动切换 -->
<swiper class="swiper-container"
indicator-dots
indicator-color="gray"
indicator-active-color="red"
autoplay="true"
interval="2000"
circular="true">
<swiper-item>
<image src="../img/01.jpg" alt="" srcset="" style="width: 100%;"></image>>
</swiper-item>
<swiper-item>
<image src="../img/02.jpg" alt="" srcset="" style="width: 100%;"></image>>
</swiper-item>
<swiper-item>
<image src="../img/03.jpg" alt="" srcset="" style="width: 100%;"></image>>
</swiper-item>
</swiper>
.swiper-container{
height: 200px;//设置一个简单的样式高度
}
效果实现其实靠得微信小程序开发里的swiper组件
基本属性:
indicator-dots 是否显示面板
circular 衔接滑动 -
autoplay 是否自动切换
indicator-color和indicator-active-color 控制颜色
interval:设置轮播图延时