微信小程序swiper实现层叠轮播图

在微信小程序中,需要实现展示5个，横向层叠的轮播图效果，轮播图由中间到2侧的依次缩小.如下图
使用原生小程序进行开发,没有使用Skyline模式，所以layout-type配置项也无效。所以基于swiper组件进行调整。
主要思路就是设置不同的样式，根据当前激活的项，来动态切换样式。
需要注意的是，下文激活的项指的是中间最大的一项，而不是swiper激活的最左侧的一项

1. swiper-item

由于有层叠效果，所以要给不同的swiper-item元素添加上不同的zindex层级。而swiper-item元素自带绝对定位。

根据层叠数量决定需要加几个层级。当有5个时，只要给激活的中间项加上最高的层级，左右2侧加上低一层级。

2. item

不同层级的swiper-item中的item对应有不同的样式，根据所在的不同层级，需要给对应的item添加上具体的效果样式。
此效果需要给不同的item添加缩放和左右偏移样式

3.动态切换

在轮播图的切换中，需要给各个swiper-item动态切换样式。
我实现的方式是在swiper的bindchange方法中改变激活项的序号，编写wxs方法，将当前激活序号和此项序号传入方法进行判断，返回不同的类，wxml动态渲染不同的类。
同时轮播图一般需要循环无限滚动，所以也需要加上轮播图项的个数。

<swiper class="swiperedu" display-multiple-items="5"  circular="{
   
   {true}}" bindchange="swiperChange" autoplay="{
   
   {true}}">
	<swiper-item wx:for="{
   
   {list}}" wx:key="{
   
   {item}}" class="{
   
   {transform.classindex(index,nowIdx,listlen)}}">
    <view class='{
   
   {transform.classtype(index,nowIdx,listlen)}}'></view>
	</swiper