微信小程序之卡片轮播

ゝ一世哀愁。 2022-12-14 13:38 236阅读 0赞

wxml:

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