微信小程序 轮播图代码
时间: 2023-09-30 11:08:16 浏览: 70
微信小程序轮播图代码
5星 · 资源好评率100%
微信小程序轮播图的代码如下:
首先,在小程序的 wxml 文件中,添加如下代码:
```
<!-- 轮播图组件 -->
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="aspectFit"></image>
</swiper-item>
</block>
</swiper>
```
然后,在小程序的 js 文件中,添加如下代码:
```
//轮播图片数组
data: {
imgUrls: [
'https://image.weilanwl.com/color2.0/3.jpg',
'https://image.weilanwl.com/color2.0/4.jpg',
'https://image.weilanwl.com/color2.0/5.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
},
```
这样就可以在小程序中使用轮播图了。
注意:
- imgUrls 中存储的是图片的 URL 地址,可以将自己的图片地址替换进去。
- indicatorDots 表示是否显示面板指示点,autoplay 表示是否自动切换,interval 表示自动切换时间间隔,duration 表示滑动动画时长。
阅读全文