微信小程序之卡片轮播

最新推荐文章于 2026-04-24 02:02:17 发布

原创最新推荐文章于 2026-04-24 02:02:17 发布 · 1.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序

wxml:

<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>

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
    })
  }
})

wxss:

.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;
}

标签

#web #css3