界面内容并非本人原创，只是适配了原生小程序代码

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

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

引用站外地址
coloruicss
github

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

1

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

tower-swiper.json

1
2
3
4
 
{
"component": true,
"usingComponents": {}
}

tower-swiper.wxml

1
2
3
4
5
6
7
8
9
10
 
<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

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

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
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
      })
    },
  }
})