今日分享【微信小程序实现堆叠式轮播图】

1、先看效果

2、来看具体实现代码

• wxml

<view class="swiper-box-1" bindtouchmove="tauchMove" bindtouchstart="tauchStart" bindtouchend="tauchEnd">
  <view class="item-box-1 {
    {item.zIndex==1?'none':''}}" wx:for="{
    {swiperList}}" wx:key="index" style="--index:{
       {
       item.zIndex}};--left:{
       {
       item.mLeft}}">
    <view class="swiper-item">
      <image src="{
    {item.url}}" mode="aspectFill"></image>
    </view>
  </view>
</view>

• wxss

.swiper-item image{
   
  width: 100%;
  display: block;
  height: 100%;
  margin: 0;
  pointer-events: none