微信小程序 --自定义堆叠式Swiper

原生小程序写堆叠式swiper

首先看下最终的效果，三张卡片堆叠式swiper，居中的为展示，左右两边为前一个和后一个，如果是第一长，或者最后一张，对应的前后无阴影堆叠

实现思路

一共渲染出4个卡片，然后根据显示位置设置zIndex,scale,left等属性，监听用户的滑动行为，对4个卡片的位置进行调整，然后只在当前最中间的卡片展示数据

代码如下：
wxml：

<view class="info-card">
  <view class="pagination-prompt">
    {{ currentGuestIndex }} / {{ totalGuests }}
  </view>
  <view class="tower-swiper" style="--cardHeight:{{cardHeight}}" bindtouchstart="towerStart" bindtouchend="towerEnd">
    <view class="tower-item {{(item.zIndex == 2 && currentGuestIndex == 1) || (item.zIndex == 3 && currentGuestIndex == dataList.length) ? 'none' : ''}}" wx:for="{{swiperList}}" wx:key="id" style="--index:{{item.zIndex}};--left:{{item.left}};--scale:{{item.scale}};--color:{{item.bgColor}}">
      <view class="swiper-item">
        <view style="text-align: center;margin-top: 200px;" wx:if="{{item.zIndex == 4}}">
          数据展示ID：{{ dataList[currentGuestIndex - 1].id }}
        </view>
      </view>
    </view>
  </view>
</view>

less

.info-card {
  width: 100%;
  height: 100%;
  padding: 20rpx 0;
  .pagination-prompt {
    height: 30rpx;
    line-height: 30rpx;
    width: 160rpx;
    text-align: center;
    font-size: 20rpx;
    background-color: #d6d6d6;
    border-radius: 40rpx;
    margin: 0 auto 20rpx;
  }

  .tower-swiper {
    width: 100%;
    height: calc(var(--cardHeight) * 1px);
    overflow: hidden;
    position: relative;
    .tower-item {
      position: absolute;
      width: 100%;
      height: 110%;
      bottom: 0;
      margin: auto;
      transition: all 0.2s ease-in 0s;
      opacity: 1;
      border-radius: 30rpx;
      top: 0;
      left: calc(var(--left) * 1px);
      transform: scale(var(--scale));
      background-color: var(--color);
      z-index: var(--index);
      overflow: hidden;
      &.none {
        opacity: 0;
      }
      .swiper-item {
        width: 100%;
        height: 100%;
      }
    }
  }
}

js

const app = getApp()
Component({
  properties: {
    dataList: {
      type: Object,
      value: [{
        id: 0}, {
        id: 1}, {
        id: 2}, {
        id: 3}, {
        id: 4}, {
        id: 5}, {
        id: 6}]
    }
  },

  data: {
    totalGuests: 1,
    currentGuestIndex: 1,
    swiperList: [],
  },

  lifetimes: {
    attached: function () {
      this.setData({
        cardHeight: app.globalData.bodyHeight - 50,
        clientWidth: wx.getSystemInfoSync().windowWidth,
        currentGuestIndex: 1,
        totalGuests: this.data.dataList.length
      })
      this.towerSwiper('swiperList')
    },
  },

  methods: {
    towerSwiper(name) {
      const clientWidth = this.data.clientWidth
      const list = [{
        id:1,
        zIndex: 1,
        left: 0,
        scale: .8,
        bgColor: '#acacac',
        showData: false
      }, {
        id:2,
        zIndex: 2,
        left: parseInt(-4.5 * clientWidth / 100),
        scale: .86,
        bgColor: '#acacac',
        showData: false
      }, {
        id:3,
        zIndex: 4,
        left: 0,
        scale: .9,
        bgColor: 'yellow',
        showData: true
      }, {
        id:4,
        zIndex: 3,
        left: parseInt(4.5 * clientWidth / 100),
        scale: .86,
        bgColor: '#acacac',
        showData: false
      }]
      this.setData({
        swiperList: list
      })
    },
    // towerSwiper触摸开始
    towerStart(e) {
      this.setData({
        towerStart: e.touches[0].pageX
      })
    },
    // towerSwiper计算滚动
    towerEnd(e) {
      console.log(e.changedTouches[0].pageX - this.data.towerStart);
      const valueTouch = Math.abs(e.changedTouches[0].pageX - this.data.towerStart) > 50 ? true : false
      if(!valueTouch) return false
      const direction = e.changedTouches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'
      const list = this.data.swiperList
      const clientWidth = this.data.clientWidth
      if (direction == 'right') {
        if(this.data.currentGuestIndex - 1 > 0) {
          const preDataIndex = this.data.currentGuestIndex - 1
          const newList = list.map((item, index) => {
            switch(item.zIndex) {
              case 1:
                item.left = parseInt(-4.5 * clientWidth / 100)
                item.zIndex = 2
                item.scale = .86
                break;
              case 2:
                item.left = 0
                item.zIndex = 4
                item.scale = .9
                item.showData = true
                item.bgColor = 'yellow'
                break;
              case 3:
                item.left = 0
                item.zIndex = 1
                item.scale = .8
                break;
              case 4:
                item.left = parseInt(4.5 * clientWidth / 100)
                item.zIndex = 3
                item.scale = .86
                item.showData = false
                item.bgColor = '#acacac'
                break;
            }
            return item
          })
          this.setData({
            swiperList: newList,
            currentGuestIndex: preDataIndex
          })
        }
      } else {
        if(this.data.currentGuestIndex + 1 <= this.data.dataList.length) {
          const nextDataIndex = this.data.currentGuestIndex + 1
          const newList = list.map((item, index) => {
            switch(item.zIndex) {
              case 1:
                item.left = parseInt(4.5 * clientWidth / 100)
                item.zIndex = 3
                item.scale = .86
                break;
              case 2:
                item.left = 0
                item.zIndex = 1
                item.scale = .8
                break;
              case 3:
                item.left = 0
                item.zIndex = 4
                item.scale = .9
                item.showData = true
                item.bgColor = 'yellow'
                break;
              case 4:
                item.left = parseInt(-4.5 * clientWidth / 100)
                item.zIndex = 2
                item.scale = .86
                item.showData = false
                item.bgColor = '#acacac'
                break;
            }
            return item
          })
          this.setData({
            swiperList: newList,
            currentGuestIndex: nextDataIndex
          })
        }

      }
    }
  }
})