在微信小程序中,需要實(shí)現(xiàn)展示5個(gè)，橫向?qū)盈B的輪播圖效果，輪播圖由中間到2側(cè)的依次縮小.如下圖
使用原生小程序進(jìn)行開發(fā),沒有使用Skyline模式，所以layout-type配置項(xiàng)也無效。所以基于swiper組件進(jìn)行調(diào)整。
主要思路就是設(shè)置不同的樣式，根據(jù)當(dāng)前激活的項(xiàng)，來動(dòng)態(tài)切換樣式。
需要注意的是，下文激活的項(xiàng)指的是中間最大的一項(xiàng)，而不是swiper激活的最左側(cè)的一項(xiàng)

1. swiper-item

由于有層疊效果，所以要給不同的swiper-item元素添加上不同的zindex層級(jí)。而swiper-item元素自帶絕對(duì)定位。

根據(jù)層疊數(shù)量決定需要加幾個(gè)層級(jí)。當(dāng)有5個(gè)時(shí)，只要給激活的中間項(xiàng)加上最高的層級(jí)，左右2側(cè)加上低一層級(jí)。

2. item

不同層級(jí)的swiper-item中的item對(duì)應(yīng)有不同的樣式，根據(jù)所在的不同層級(jí)，需要給對(duì)應(yīng)的item添加上具體的效果樣式。
此效果需要給不同的item添加縮放和左右偏移樣式

3.動(dòng)態(tài)切換

在輪播圖的切換中，需要給各個(gè)swiper-item動(dòng)態(tài)切換樣式。
我實(shí)現(xiàn)的方式是在swiper的bindchange方法中改變激活項(xiàng)的序號(hào)，編寫wxs方法，將當(dāng)前激活序號(hào)和此項(xiàng)序號(hào)傳入方法進(jìn)行判斷，返回不同的類，wxml動(dòng)態(tài)渲染不同的類。
同時(shí)輪播圖一般需要循環(huán)無限滾動(dòng)，所以也需要加上輪播圖項(xiàng)的個(gè)數(shù)。

<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>

classindex方法動(dòng)態(tài)的判斷swiper-item的層級(jí)，classtype方法動(dòng)態(tài)判斷item的樣式。

// 判斷樣式
var classtype = function(index,curindex,length){
  var indexnum = parseInt(index),curindexnum = parseInt(curindex);
  var cha = Math.abs(indexnum-curindexnum);
  //激活項(xiàng)是list最后一項(xiàng)
  if(curindex ==length-1){
  // 首尾銜接,第一項(xiàng)在最后一項(xiàng)右邊
    if(index==0){
      return '激活項(xiàng)右邊樣式類';
    }
  }
  //激活項(xiàng)是list最后一項(xiàng)
  else if(curindex==0){
  // 首尾銜接,最后一項(xiàng)在第一項(xiàng)在左邊
    if(index==length-1){
      return '激活項(xiàng)右左邊樣式類';
    }
  }
  //激活項(xiàng)
  if(cha==0){
    return '激活項(xiàng)樣式'
  }
  //激活項(xiàng)右側(cè)
  else if(indexnum-curindexnum==1){
    return '激活項(xiàng)右邊樣式類';
  }
  //激活項(xiàng)左側(cè)
  else if(indexnum-curindexnum==-1){
    return '激活項(xiàng)左邊樣式類';
  }
  else {
    return '普通樣式'
  }
}

// 判斷層級(jí)
var classindex = function(index,curindex,length){
  var indexnum = parseInt(index),curindexnum = parseInt(curindex);
  var cha = Math.abs(indexnum-curindexnum);
  //激活swipet-item是list最后一項(xiàng)
  if(curindex ==length-1){
  // 首尾銜接,第一swiper-item在最后一個(gè)右邊
    if(index==0){
      return 'zindex2';
    }
  }
   //激活swiper-item是list最后一項(xiàng)
  else if(curindex==0){
  // 首尾銜接,最后swiper-item在第一個(gè)左邊
    if(index==length-1){
      return 'zindex2';
    }
  }
  //激活項(xiàng),層級(jí)最高
  if(cha==0){
    return 'zindex3'
  }
  //左右兩側(cè),層級(jí)第2
  else if(cha==1){
    return 'zindex2';
  }
  //普通不加層級(jí)
  else {
    return ''
  }
}

輪播圖循環(huán)變化時(shí)，要計(jì)算%的序號(hào)

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

e.detail.current是輪播圖的currentIndex，指的是swiper最左側(cè)的swiper，由于效果中激活項(xiàng)是坐起第3項(xiàng)，所以激活的index需要+2；

總結(jié)

這個(gè)效果的變化是由swiper自動(dòng)切換，觸發(fā)bindchange方法推動(dòng)的。沒有顯式的聲明swiper的current。
對(duì)于提供給用戶切換箭頭方法的層疊輪播圖，需要聲明swiper的current屬性，用戶的切換和current切換的事件會(huì)相互沖突，那個(gè)效果有時(shí)間再寫吧文章來源地址http://www.zghlxwxcb.cn/news/detail-821735.html

到了這里，關(guān)于微信小程序swiper實(shí)現(xiàn)層疊輪播圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！