微信小程序轮播图swiper

微信小程序轮播图设置

• 在wxml中添加

<view class="content">
  <swiper indicator-dots="true" autoplay="true" interval="2000" 	circular="true">
    <swiper-item>
        <image  mode="widthFix" src="../../images/1.jpg"></image>
        //<image  mode="widthFix" src="https://wxblog-1258458647.cos.ap-nanjing.myqcloud.com/flask_blog/wx/icon_index.png"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="../../images/2.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="../../images/3.jpg"></image>
    </swiper-item>
  </swiper>
</view>

• 设置样式

swoper{
  width: 100%;
  height: calc(750rpx * 500/889);
}
image{
  width: 100%;
}