美文网首页
微信小程序 自定义特殊的swiper

微信小程序 自定义特殊的swiper

作者: small瓜瓜 | 来源:发表于2019-07-19 08:41 被阅读0次
    <swiper  autoplay circular next-margin="60rpx" previous-margin="60rpx" bindchange="changeIndex">
        <swiper-item wx:for="{{imgUrls}}" wx:key="item" class="swiper_item">
          <view class="swiper_view_main" style="{{'transform: scaleX(0.95) scaleY('+(index==currentIndex?0.9:0.75)+')'}}">
            <image src="{{item}}" class="img_item" />
            <view class="swiper_tip">这是一个tip</view>
          </view>
        </swiper-item>
      </swiper>
    
    Page({
      data: {
        currentIndex: 0,
        imgUrls: [
          'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
          'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
          'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
        ],
      },
      changeIndex: function(e) {
        this.setData({
          currentIndex: e.detail.current
        })
      }
    })
    
    swiper {
      width: 100%;
      height: 260rpx;
    }
    
    .swiper_view_main {
      transition: all 1s;
    }
    
    .img_item {
      border-radius: 20rpx;
      height: 260rpx;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .swiper_tip {
      color: #fff;
      font-size: 35rpx;
      position: absolute;
      bottom: 20rpx;
      left: 40rpx;
    }
    

    相关文章

      网友评论

          本文标题:微信小程序 自定义特殊的swiper

          本文链接:https://www.haomeiwen.com/subject/itgklctx.html