微信小程序轮播图

效果图

代码实现

start.wxml

注意：<swiper>不能被view包裹，不然无法出现效果。（我也是试了半天，才在网上找到解决方案。）

<view class="container">
 
  <!-- 轮播图 -->
  <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" circular="true">  
    <block wx:for="{{images}}" wx:for-index="index" wx:key="id">  
      <swiper-item>  
        <image src="{{item.url}}" class="slide-image" mode="widthFix"/>  
      </swiper-item>  
    </block>  
  </swiper>  
</view>

start.js

 data: {  
    images:[  
      {url:'/images/show/1.jpg'} ,  
      {url:'/images/show/2.jpg'} ,  
      {url:'/images/show/3.jpg'} ,  
      {url:'/images/show/4.jpg'} ,
      {url:'/images/show/5.jpg'} ,
      {url:'/images/show/6.jpg'} ,
      ]  
  },  
  onLoad: function () {  
  }  
}) 

start.wxss

.swiper {
  position: absolute;
  top:0rpx;
  height: calc(100vm*365/974);
  width: 100%;
}
.swiper image {
  width: 100%;
}