微信小程序--层叠轮播图_微信小程序实现堆叠式轮播

效果展示

Demo代码

wxml

<view class="selection_cards" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
    <view class="selection_cards_item" wx:for="{{list}}" wx:key="index"
        style="left:{{item.style.left}}px; z-index:{{item.style.zIndex}};transform:{{item.style.transform}};opacity:{{item.style.opacity}};transition:{{!isTouch?'0.1s':0}};background-image: url({{item.backimage}});">
    </view>
</view>
1
2
3
4
5

wxss

/*层叠轮播选牌，css*/
.selection_cards{
  width: 100%;
  height: 400rpx;
  position: relative;
  margin-top: 200px;
  z-index: 99;
}

.selection_cards_item{
  width: 194rpx;/*188*/
  height:350rpx;/*340*/
  background-size: 100%;
  /* overflow: hidden; */
  border-radius: 16rpx;
  position: absolute;
  top: 0;
  color: white;
  font-size: 100rpx;
  box-sizing: border-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

js

完整源码获取途径如下
1