小程序卡片式轮播图 swiper

相关项目链接：http://github.crmeb.net/u/mmj
小程序卡片式轮播图swiper

  <view class='header'>
   <swiper  indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" bindchange="bindchange" previous-margin="34px" next-margin="34px">
     <block wx:for="{{member}}">
        <swiper-item>
           <view class="memberBg {{item.class}} {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
              <image src='{{item.sian}}'></image>
              <view class='name'>{{item.name}}</view>
              <view class='discount'>可享受商品折扣: 9.8折<text class='iconfont icon-zhekou'></text></view>
              <view class='nav acea-row'>
                 <view class='item'>
                    <view class='num'>166</view>
                    <view>积分数</view>
                 </view>
                 <view class='item'>
                    <view class='num'>166</view>
                    <view>消费金额</view>
                 </view>
                 <view class='item'>
                    <view class='num'>166</view>
                    <view>消费次数</view>
                 </view>
              </view>
              <!-- <view class='lock'><text class='iconfont icon-quanxianguanlisuozi'></text>该会员等级尚未解锁</view> -->
              <!-- <view class='lock'><text class='iconfont icon-xuanzhong1'></text>已解锁更高等级</view> -->
             </view>
          </swiper-item>
        </block>
     </swiper>
   </view>

js：
  member: [
      { 'name': '钻石会员', 'sian': '/images/diamonds.png', 'class':'diamonds'},
      { 'name': '黄金会员', 'sian': '/images/gold.png', 'class': 'gold' },
      { 'name': '白银会员', 'sian': '/images/silver.png', 'class': 'silver'},
      { 'name': '黄铜会员', 'sian': '/images/brass.png', 'class': 'brass'},
      { 'name': '青铜会员', 'sian': '/images/bronze.png', 'class': 'bronze' },
      { 'name': '普通会员', 'sian': '/images/ordinary.png', 'class': 'ordinary'}
    ],
    indicatorDots: false,
    circular: true,
    autoplay: false,
    interval: 3000,
    duration: 500,
    swiperIndex: 0,
  bindchange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  },
.header{background-color:#232323;width:100%;padding:50rpx 0;}
.header swiper{width:100%;height:328rpx;position:relative;}
 .header swiper-item .memberBg.active{transform: none;transition: all 0.2s ease-in 0s;}
.header swiper-item .memberBg.quiet{ transform: scale(0.9);transition: all 0.2s ease-in 0s;}
.header swiper-item .memberBg{width:100%;height:328rpx;border-radius:16rpx;color:#fff;position:relative;}
.header swiper-item .memberBg.diamonds{background-image: linear-gradient(to right,#a895dd 0%,#655cb0 100%);}
 .header swiper-item .memberBg.gold{background-image: linear-gradient(to right,#e3c072 0%,#cf9e51 100%);}
.header swiper-item .memberBg.silver{background-image: linear-gradient(to right,#bebebe 0%,#929292 100%);}
 .header swiper-item .memberBg.brass{background-image: linear-gradient(to right,#e8cba7 0%,#caaf8f 100%);}
.header swiper-item .memberBg.bronze{background-image: linear-gradient(to right,#9ab1c2 0%,#6a8493 100%);}
 .header swiper-item .memberBg.ordinary{background-image: linear-gradient(to right,#7aa7ed 0%,#6292de 100%);}
.header swiper-item .memberBg image{width:89rpx;height:108rpx;display:block;position:absolute;right:60rpx;}
 .header swiper-item .memberBg .name{font-size:46rpx;font-weight:bold;padding:40rpx 0 0 35rpx;}
.header swiper-item .memberBg .discount{font-size:28rpx;font-weight:bold;margin:15rpx 0 0 35rpx;}
.header swiper-item .memberBg .discount .iconfont{margin-left:10rpx;font-size:30rpx;}
 .header swiper-item .memberBg .nav{margin-top:55rpx;}
.header swiper-item .memberBg .nav .item .num{font-size:40rpx;color:#fff;font-family: 'Guildford Pro';}
.header swiper-item .memberBg .nav .item~.item::before{position:absolute;width:2rpx;height:32rpx;background-color:rgba(255, 255, 255, 0.6);content:'';left:0;top:50%;transform:translateY(-50%);}
 .header swiper-item .memberBg .lock{font-size:26rpx;margin:73rpx 0 0 35rpx;}
.header swiper-item .memberBg .lock .iconfont{font-size:37rpx;margin-right:15rpx;vertical-align:-4rpx;}

相关项目链接：http://github.crmeb.net/u/mmj

小程序、h5、公众号打通版