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

话不多说先上图.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" indicatoractive"#f49641"dots  interval"2000" duration"1000" previousmargin"30px" next circular bindchange"bindchange" style'height: {{swiperHeight}}px'>
      swiperitem>
 mode'aspectFill'>
>
>

.swiperClass {
top10px;

  width100%;
  borderradius;
}

  transform none;
}  

 scale(0.8333333);

data     imgUrls[
,


    swiperIndex0 //这里不写第一次启动展示的时候会有问题

      swiperIndex edetailcurrent

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

注意身体，小心秃顶

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!