微信小程序轮播图代码
时间: 2024-02-18 19:57:30 浏览: 102
微信小程序代码:轮播图变换
以下是微信小程序轮播图的代码示例:
1. 页面代码(index.wxml):
```html
<view class="container">
<!--轮播图-->
<swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for-items="{{lunboData}}">
<swiper-item>
<image src="{{item.imgurl}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>
```
2. 配置信息(index.js):
```javascript
Page({
data: {
//轮播图配置
autoplay: true,
interval: 3000,
duration: 1200
},
onLoad: function () {
var that = this;
var data = {
"datas": [
{
"id": 1,
"imgurl": "../../images/a1.jpg"
},
{
"id": 2,
"imgurl": "../../images/a2.jpg"
}
]
};
that.setData({
lunboData: data.datas
})
}
})
```
阅读全文