微信小程序swiper实现层叠轮播图_微信小程序 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-item>
</swiper>
1
2
3
4
5

classindex方法动态的判断swiper-item的层级，classtype方法动态判断item的样式。

// 判断样式
var classtype = function(index,curindex,length){
  var indexnum = parseInt(index),curindexnum = parseInt(curindex);
  var cha = Math.abs(indexnum-curindexnum);
  //激活项是list最后一项
  if(curindex ==length-1){
  // 首尾衔接,第一项在最后一项右边
    if(index==0){
      return '激活项右边样式类';
    }
  }
  //激活项是list最后一项
  else if(curindex==0){
  // 首尾衔接,最后一项在第一项在左边
    if(index==length-1){
      return '激活项右左边样式类';
    }
  }
  //激活项
  if(cha==0){
    return '激活项样式'
  }
  //激活项右侧
  else if(indexnum-curindexnum==1){
    return '激活项右边样式类';
  }
  //激活项左侧
  else if(indexnum-curindexnum==-1){
    return '激活项左边样式类';
  }
  else {
    return '普通样式'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 判断层级
var classindex = function(index,curindex,length){
  var indexnum = parseInt(index),curindexnum = parseInt(curindex);
  var cha = Math.abs(indexnum-curindexnum);
  //激活swipet-item是list最后一项
  if(curindex ==length-1){
  // 首尾衔接,第一swiper-item在最后一个右边
    if(index==0){
      return 'zindex2';
    }
  }
   //激活swiper-item是list最后一项
  else if(curindex==0){
  // 首尾衔接,最后swiper-item在第一个左边
    if(index==length-1){
      return 'zindex2';
    }
  }
  //激活项,层级最高
  if(cha==0){
    return 'zindex3'
  }
  //左右两侧,层级第2
  else if(cha==1){
    return 'zindex2';
  }
  //普通不加层级
  else {
    return ''
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

轮播图循环变化时，要计算%的序号

    swiperChange(e) {
        this.setData({
            nowIdx: (e.detail.current + 2) % this.data.list.length,
        })
    },
1
2
3
4
5

e.detail.current是轮播图的currentIndex，指的是swiper最左侧的swiper，由于效果中激活项是坐起第3项，所以激活的index需要+2；

总结

这个效果的变化是由swiper自动切换，触发bindchange方法推动的。没有显式的声明swiper的current。
对于提供给用户切换箭头方法的层叠轮播图，需要声明swiper的current属性，用户的切换和current切换的事件会相互冲突，那个效果有时间再写吧