微信小程序--旋转木马/缩放轮播图效果

文章涉及技术点

微信小程序原生Swiper控件
Wxss Transform、Transition
轮播条滚动回调控制
微信小程序条件渲染、列表渲染

我们需要自己实现的功能

自动滚动+手动拖拽（原生组件帮我们完成 Property：autoplay）
面板指示点（原生组件帮我们完成 Property：indicator-dots）
左右可以露出非Active状态图的边缘（即Quiet状态，后文class会以这两个名字定义）（原生组件帮我们完成 Property：previous-margin、next-margin）
图片滚动到中心位置放大，滚动出去缩小（我们手写实现，利用技术点中提到的滚动回调+条件渲染。其中滚动回调用 Property：bindchange）
这样看下来就很清晰了，需要我们实现的只有一个动画放大缩小。再进一步

//.wxml
 <swiper class='swiperClass' autoplay indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots  interval="2000" duration="1000" previous-margin="30px" next-margin="30px" circular bindchange="bindchange" style='height: {{swiperHeight}}px'>
 <block wx:for="{{imgUrls}}" wx:key="{{index}}">
 <swiper-item>
 <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
 </image>
 </swiper-item>
 </block>
 </swiper>

//.wxss
.swiperClass {
  margin: 0;
  margin-top: 10px;
}

.slide-image {
  width: 100%; 
  height: 90%;
  border-radius: 10px;
  position: relative;
}

image.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
} 

image.quiet {
  transform: scale(0.8333333); // 使用3D效果，实现层次感
  transition: all 0.2s ease-in 0s;
}

//.js
data: {
    imgUrls: [
 'xxx',
 'xxx',
 'xxx',
 'xxx'
 ],
    swiperIndex: 0 //这里不写第一次启动展示的时候会有问题
 },

bindchange(e) {
 this.setData({
      swiperIndex: e.detail.current
 })
 },

作者：极乐叔
链接：https://www.jianshu.com/p/b65feaec5bad
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

微信小程序--旋转木马/缩放轮播图效果

文章涉及技术点

我们需要自己实现的功能

推荐阅读