前言: 微信小程序提供了滑块视图容器swiper实现轮播图效果。
具体实现代码:
1.index.wxml文件
<swiper class="list" circular="true" indicator-dots="{{ true }}" autoplay="true" interval="3000" duration="1000">
<swiper-item class="item" wx:for="{{ bannerArr }}" wx:key="index">
<image class="home-bg" src="{{ item }}"></image>
</swiper-item>
</swiper>
2.index.js文件
data: {
// banner轮播图列表数据
bannerArr: [
'../../img/banner1.png',
'../../img/banner2.png',
'../../img/banner3.png',
]
},
3.index.wxss文件
.home-bg,.list{
width: 100%;
height: 500rpx;
margin-bottom: 20rpx;
}
详细配置项和方法参考官网: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
最终效果:
![](https://i-blog.csdnimg.cn/blog_migrate/224298a1dd112b2216dca2418f2ffd95.png)