1.页面index.wxml代码
<!--index.wxml-->
<!--轮播图-->
<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
Page({
data: {
//轮播图配置
autoplay: true,
interval: 2000,
duration: 1200,
motto: '哈哈哈',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
var that = this;
var data = {
"datas": [
{
"id": 1,
"imgurl": "/pages/image/banner/1.jpg"
},
{
"id": 2,
"imgurl": "/pages/image/banner/2.jpg"
},
{
"id": 3,
"imgurl": "/pages/image/banner/3.jpg"
},
{
"id": 4,
"imgurl": "/pages/image/banner/4.jpg"
}
]
};
3.样式
/*轮播控件*/
.home-swiper {
width: 95%;
height: 360rpx;
}
.slide-image {
width: 100%;
height: 100%;
border-radius:25rpx;
}
.banner{
width: 100%;
margin:20rpx;
}
效果: