小程序卡片式輪播

微信小程序開發交流微信羣 ↓ 掃碼入羣，備註微信小程序

承接微信小程序開發。掃碼加微信。

---

效果圖

index.wxml

<swiper previous-margin="80rpx" next-margin="80rpx" bindchange="bindchange" current="{{swiperIndex}}">
    <swiper-item>
      <view class="{{swiperIndex==0?'active':'quiet'}}">
        <image src="/image/atext.png" mode='widthFix' style="width:100%;"></image>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="{{swiperIndex==1?'active':'quiet'}}">
        <image src="/image/atext.png" mode='widthFix' style="width:100%;"></image>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="{{swiperIndex==2?'active':'quiet'}}">
        <image src="/image/atext.png" mode='widthFix' style="width:100%;"></image>
      </view>
    </swiper-item>
  </swiper>

index.wcss

.active {transform: none;transition: all 0.2s ease-in 0s;} 
.quiet {transform: scale(0.85);transition: all 0.2s ease-in 0s;}

index.js

Page({
  data: {
    swiperIndex: 1
  },
  bindchange(e) {
    this.setData({ swiperIndex: e.detail.current})
  }
});