微信小程序开发指南

基于ColorUI的组件化页面开发


堆叠式轮播

堆叠式轮播

  • 样式图例

  • 示例代码
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">
  <view class="tower-item {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
    <view class="swiper-item">
      <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
      <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
    </view>
  </view>
</view>

页面列表

ITEM_HTML