小程序swiper卡片式轮播
css部分
.cardSwiper { height: 420rpx !important; } swiper-item { width: 610rpx !important; left: 70rpx; box-sizing: border-box; padding: 40rpx 0rpx 70rpx; } .swiper-view { width: 100%; display: block; height: 100%; border-radius: 10rpx; transform: scale(0.9); transition: all 0.2s ease-in 0s; overflow: hidden; border: 1rpx solid #eee; } swiper-item.cur .swiper-view { transform: none; transition: all 0.2s ease-in 0s; } .swiper-view image { display: block; width: 100%; height: 100%; margin: 0; border-radius: 10rpx; pointer-events: none; }
js部分
Page({ data: { cardCur: 0, swiperList: [{ id: 0, url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg' }, { id: 1, url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg', }, { id: 2, url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg' }, { id: 3, url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg' }, { id: 4, url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg' }, { id: 5, url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg' }, { id: 6, url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg' }], }, cardSwiper(e) { this.setData({ cardCur: e.detail.current }) } })
html部分
<swiper bindchange="cardSwiper" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-color="#8799a3" indicator-active-color="#0081ff" class="cardSwiper"> <block wx:for="{{swiperList}}" wx:key="*this"> <swiper-item class="{{cardCur==index?'cur':''}}"> <view class="swiper-view"> <image src="{{item.url}}"></image> </view> </swiper-item> </block> </swiper>