Skip to content

Instantly share code, notes, and snippets.

@rikumi

rikumi/sliderTest.js

Last active May 5, 2017
Embed
What would you like to do?
微信小程序缩放式轮播图实现
Page({
data:{
curIndex: 1 // 此处可指定初始状态显示第几个页面
},
onSwiperChange: function(event) {
this.setData({ curIndex: event.detail.current })
}
})
<!-- 此处duration时间应当与下面的-webkit-transition一致 -->
<swiper duration="300" bindchange="onSwiperChange" current="{{ curIndex }}">
<swiper-item wx:for="[0, 1, 2]" style="overflow: visible;">
<view style="width: 100%; height: 100%; background: #2bbfff; -webkit-transform: scale({{ curIndex == index ? 0.78 : 0.7 }}) translate({{ (curIndex == index - 1 || curIndex == index + 1) ? (curIndex - index) * 30 : 0 }}%, 0); -webkit-transition: .3s; position: relative;">
</view>
</swiper-item>
</swiper>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.