美文网首页
微信小程序 自定义特殊的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