话不多说先上图.gif
文章涉及技术点
微信小程序原生Swiper控件Wxss Transform、Transition轮播条滚动回调控制微信小程序条件渲染、列表渲染全部实现代码加起来也就三四十行，大部分还用来写wxml UI代码，所以功能实现起来非常简单。
首先将问题简单化，能用原生组件实现出我们想要的效果，绝不自己开发Component。原因：我懒+我自己写的也不敢说性能堪比原生组件
先来分析一波gif中我们需要实现效果和哪些效果可以直接修改原生Swiper的属性就能实现的
我们需要自己实现的功能
自动滚动+手动拖拽 （原生组件帮我们完成 Property：autoplay）
面板指示点 （原生组件帮我们完成 Property：indicator-dots）
左右可以露出非Active状态图的边缘（即Quiet状态， 后文class会以这两个名字定义） （原生组件帮我们完成 Property：previous-margin、next-margin）
图片滚动到中心位置放大，滚动出去缩小 （我们手写实现，利用技术点中提到的滚动回调+条件渲染。其中滚动回调用 Property：bindchange）
这样看下来就很清晰了，需要我们实现的只有一个动画放大缩小。再进一步
就能分成两种实现方式:
wxss实现
js实现
很显然wxss实现代码很少也能达到同样的效果，so~
//.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); transition: all 0.2s ease-in 0s;}
//.jsdata: { imgUrls: [ 'xxx', 'xxx', 'xxx', 'xxx' ], swiperIndex: 0 //这里不写第一次启动展示的时候会有问题 },bindchange(e) { this.setData({ swiperIndex: e.detail.current }) },
上面Swiper控件里面还有设置宽高的属性就随便填几个数测试就好了，不影响主要功能。
注意身体，小心秃顶
作者：一个程序猿的每一天
链接：微信小程序-旋转木马/缩放轮播图效果-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
相关文章：
微信小程序小组件：仿直播点赞气泡效果，基于Canvas
微信小程序仿APP section header 悬停效果
微信小程序
