微信小程序开发指南

基于ColorUI的组件化页面开发


卡片式轮播

<h1>卡片式轮播</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=b18b4cbc2894f56bd7585a65a9aea2fa&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff"&gt; &lt;swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}"&gt; &lt;view class="swiper-item"&gt; &lt;image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"&gt;&lt;/image&gt; &lt;video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"&gt;&lt;/video&gt; &lt;/view&gt; &lt;/swiper-item&gt; &lt;/swiper&gt;</code></pre>

页面列表

ITEM_HTML