小程序轮播

官方的swiper组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

示例代码：

在.wxml文件中：

<swiper indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#B25C35" autoplay='ture'>
    <swiper-item wx:for="{{banner}}" wx:key>
      <image src='{{item.bannerimg}}' class='banner-image'> </image>
    </swiper-item>
  </swiper>

在.js文件中：

​Page({
data: { 
    banner: [{
        bannerimg: "/images/banner1.jpg"

      },
      {
        bannerimg: "/images/banner1.jpg"

      },
      {
        bannerimg: "/images/banner1.jpg"

      },
      {
        bannerimg: "/images/banner1.jpg"

      }
    ]
}
})
​

在.wxss文件中：

.swiper-item {
  margin-left: 10%;
  margin-right: 10%;
}

.banner-image {
  display: block;
  width: 735rpx;
  height: 150px;
  margin: auto;
}

效果图：

 

如有不对的地方，望各路大神指点，小女子在此谢过O(∩_∩)O