堆叠轮播图（color ui原生小程序代码优化)

{% note info simple %}
界面内容并非本人原创，只是适配了原生小程序代码
{% endnote %}

最近找了一些小程序的组件库，发现了Color UI界面和色彩搭配都比较符合我的需求，但是在进一步了解的时候发现这个项目已经停更了很长时间，有一部分功能已经无法正常使用。

感兴趣的可以到作者仓库看看

{% link coloruicss,github,https://github.com/weilanwl/coloruicss?tab=readme-ov-file %}

项目中的堆叠轮播图挺好看，但是没有原生小程序代码，故此进行了简单的适配

这里封装成了组件，组件属性根据自己需求修改

tower-swiper.json

{
"component": true,
"usingComponents": {}
}

tower-swiper.wxml

<view>
  <view class="tower-swiper" bindtouchmove="TowerMove" bindtouchstart="TowerStart" bindtouchend="TowerEnd">
    <view class="tower-item {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key="index" style="transform: scale(calc(0.5 + {{item.zIndex}} / 10));--index: {{item.zIndex}};margin-left: calc({{item.mLeft}} * 100rpx - 150rpx); z-index: {{item.zIndex}};">
      <view class="swiper-item">
        <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
        <video src="{{item.url}}" autoplay loop muted data-show-play-btn="false" objectFit="cover" wx:if="{{item.type == 'video'}}"></video>
      </view>
    </view>
  </view>
</view>

tower-swiper.wxss

.tower-swiper {
    height: 420rpx;
    position: relative;
    max-width: 750rpx;
    overflow: hidden;
}

.tower-swiper .tower-item {
    position: absolute;
    width: 300rpx;
    height: 380rpx;
    top: 0;
    bottom: 0;
    left: 50%;
    margin: auto;
    transition: all 0.2s ease-in 0s;
    opacity: 1;
}

.tower-swiper .tower-item .none {
    opacity: 0;
}

.tower-swiper .tower-item .swiper-item {
    width: 100%;
    height: 100%;
    border-radius: 6rpx;
    overflow: hidden;
}

tower-swiper.js

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    swiperList:{
      type:Array,
      value:[{
        id: 0,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
      }, {
        id: 1,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
      }, {
        id: 2,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
      }, {
        id: 3,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
      }, {
        id: 4,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
      }, {
        id: 5,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
      }, {
        id: 6,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
      }]
    },
    towerStart:{
      type:Number,
      value:0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    timer:null,
    towerStart: 0,
    direction: 'left'
  },
  lifetimes:{
    attached(){
      this.TowerSwiper();
      this.direction = 'left';
      this.setData({
        direction: "left"
      })
      this.swiperOn()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    swiperOn(){
      const _this = this
      let timer = this.data.timer
      if(!timer){
        timer = setInterval(()=>{
          _this.TowerEnd()
        },1000)
        this.setData({
          timer
        })
      }
  
    },
    // 初始化towerSwiper
    TowerSwiper() {
      let list = this.data.swiperList;
      for (let i = 0; i < list.length; i++) {
        list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
        list[i].mLeft = i - parseInt(list.length / 2)
      }
      this.setData({
        swiperList: list
      })
    },
    // towerSwiper触摸开始
    TowerStart(e) {
      const pageWidth = wx.getSystemInfoSync().windowWidth
  
      this.setData({
        towerStart: e.touches[0].pageX,
        direction: e.touches[0].pageX < pageWidth/2 ? 'right':'left'
      })
    },
    // towerSwiper计算方向
    TowerMove(e) {
      this.setData({
        direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'
      })
    },
    // towerSwiper计算滚动
    TowerEnd() {
      let direction = this.data.direction;
      let list = this.data.swiperList;
      if (direction == 'right') {
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < this.data.swiperList.length; i++) {
          list[i - 1].mLeft = list[i].mLeft
          list[i - 1].zIndex = list[i].zIndex
        }
        list[list.length - 1].mLeft = mLeft
        list[list.length - 1].zIndex = zIndex
      } else {
        let mLeft = list[list.length - 1].mLeft;
        let zIndex = list[list.length - 1].zIndex;
        for (let i = list.length - 1; i > 0; i--) {
          list[i].mLeft = list[i - 1].mLeft
          list[i].zIndex = list[i - 1].zIndex
        }
        list[0].mLeft = mLeft;
        list[0].zIndex = zIndex;
      }
      this.setData({
        direction,
        swiperList: list
      })
    },
  }
})