微信小程序 轮播图

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;
}

效果: