微信小程序旋转木马/缩放轮播图效果是一种什么样的效果，，怎样实现这一效果，，下面为各人介绍这篇文章。。。

效果

文章涉及手艺点

微信小程序原生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~

1. //.wxml
2. <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'>
3. <block wx:for="{{imgUrls}}" wx:key="{{index}}">
4. <swiper-item>
5. <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
6. </image>
7. </swiper-item>
8. </block>
9. </swiper>

1. //.wxss
2. .swiperClass {
3. margin: 0;
4. margin-top: 10px;
5. }
6.  
7. .slide-image {
8. width: 100%;
9. height: 90%;
10. border-radius: 10px;
11. position: relative;
12. }
13.  
14. image.active {
15. transform: none;
16. transition: all 0.2s ease-in 0s;
17. }
18.  
19. image.quiet {
20. transform: scale(0.8333333);
21. transition: all 0.2s ease-in 0s;
22. }

1. //.js
2. data: {
3. imgUrls: [
4. 'xxx',
5. 'xxx',
6. 'xxx',
7. 'xxx'
8. ],
9. swiperIndex: 0 //这里不写第一次启动展示的时间会有问题
10. },
11.  
12. bindchange(e) {
13. this.setData({
14. swiperIndex: e.detail.current
15. })
16. },

上面Swiper控件内里尚有设置宽高的属性就随便填几个数测试就好了，，不影响主要功效。。。

小程序工具开发公司长沙，，是一家有着十年手艺前沿的公司，，我们以先进手艺提供并解决各行业小程序开发，，操作简朴，，支持多种社群营销活动，，以及可视化模板操作，，大大镌汰人力物力本钱。。。

小程序工具提供多类型商城/门店小程序制作，，可视化编辑 1秒天生5步上线。。。通过拖拽、拼接模浚浚块结构小程序商城页面，，所看即所得，，只需要美工就能做出细腻商城。。。更多小程序市肆请审查：小程序市肆