微信小程序怎么实现旋转木马效果

微信小程序怎么实现旋转木马效果

这篇文章主要介绍“微信小程序怎么实现旋转木马效果 ”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序怎么实现旋转木马效果 ”文章能帮助大家解决问题。

文章涉及技术点

微信小程序原生Swiper控件WxssTransform、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<swiperclass='swiperClass'autoplayindicator-color="#a39f99"indicator-active-color="#f49641"indicator-dotsinterval="2000"duration="1000"previous-margin="30px"next-margin="30px"circularbindchange="bindchange"style='height:{{swiperHeight}}px'><blockwx:for="{{imgUrls}}"wx:key="{{index}}"><swiper-item><imagesrc="{{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:all0.2sease-in0s;}image.quiet{transform:scale(0.8333333);transition:all0.2sease-in0s;}

//.jsdata:{imgUrls:['xxx','xxx','xxx','xxx'],swiperIndex:0//这里不写第一次启动展示的时候会有问题},bindchange(e){this.setData({swiperIndex:e.detail.current})},

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

关于“微信小程序怎么实现旋转木马效果 ”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。