首页

源码搜藏网

首页 > 微信小程序 > 微信小程序开发教程 >

微信小程序实现旋转木马/缩放轮播图效果详解

创建时间：2018-08-09 16:26  浏览次

文章涉及技术点



全部实现代码加起来也就三四十行，大部分还用来写wxml UI代码，所以功能实现起来非常简单。

首先将问题简单化，能用原生组件实现出我们想要的效果，绝不自己开发Component。原因：我懒+我自己写的也不敢说性能堪比原生组件

先来分析一波gif中我们需要实现效果和哪些效果可以直接修改原生Swiper的属性就能实现的
微信小程序实现旋转木马/缩放轮播图效果详解 

7143015.png (49.87 KB, 下载次数: 0)

下载附件  保存到相册

2018-7-27 14:31 上传

 

微信小程序实现旋转木马/缩放轮播图效果详解 
微信小程序实现旋转木马/缩放轮播图效果详解

我们需要自己实现的功能


这样看下来就很清晰了，需要我们实现的只有一个动画放大缩小。再进一步

就能分成两种实现方式:


很显然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控件里面还有设置宽高的属性就随便填几个数测试就好了，不影响主要功能。
上一篇：看完你就会的微信小程序微信授权登录具体实现步骤
下一篇：微信小程序开发实现左右菜单联动教程

相关内容