小程序卡片式轮播:swiper

阅读量: 188 编辑

小程序卡片式轮播图

.wxml

<swiper class="banner" autoplay="true" indicator-dots="true" indicator-color="#2b2b2b"
    indicator-active-color="#42c642" circular="true" >
  <swiper-item wx:for="{{banners}}">
    <image src="{{item}}" mode="aspectFill"></image>
  </swiper-item>
</swiper>

.js

data: {
    banners: [
      "/images/s1.png",
      "/images/s2.png",
      "/images/s3.png",
      "/images/s4.png"
    ]
}    

.wxss

.banner{
 width: 100%;
 height: 350rpx;
}

.banner image{
 width: 100%;
 height: 350rpx;
}

源码下载

https://mp.weixin.qq.com/s/014aXNPAfHZCriDPvjuJCA