相关项目链接: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、公众号打通版