微信小程序开发指南

基于ColorUI的组件化页面开发


动态类卡片

<h1>动态类卡片</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=6ee1399c91ac06e5760c97c7092a2200&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;view class="cu-card dynamic {{isCard?'no-card':''}}"&gt; &lt;view class="cu-item shadow"&gt; &lt;view class="cu-list menu-avatar"&gt; &lt;view class="cu-item"&gt; &lt;view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"&gt;&lt;/view&gt; &lt;view class="content flex-sub"&gt; &lt;view&gt;凯尔&lt;/view&gt; &lt;view class="text-gray text-sm flex justify-between"&gt; 2019年12月3日 &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="text-content"&gt; 折磨生出苦难,苦难又会加剧折磨,凡间这无穷的循环,将有我来终结! &lt;/view&gt; &lt;view class="grid flex-sub padding-lr {{isCard?'col-3 grid-square':'col-1'}}"&gt; &lt;view class="bg-img {{isCard?'':'only-img'}}" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);" wx:for="{{isCard?9:1}}" wx:key="{{index}}"&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="text-gray text-sm text-right padding"&gt; &lt;text class="cuIcon-attentionfill margin-lr-xs"&gt;&lt;/text&gt; 10 &lt;text class="cuIcon-appreciatefill margin-lr-xs"&gt;&lt;/text&gt; 20 &lt;text class="cuIcon-messagefill margin-lr-xs"&gt;&lt;/text&gt; 30 &lt;/view&gt; &lt;view class="cu-list menu-avatar comment solids-top"&gt; &lt;view class="cu-item"&gt; &lt;view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"&gt;&lt;/view&gt; &lt;view class="content"&gt; &lt;view class="text-grey"&gt;莫甘娜&lt;/view&gt; &lt;view class="text-gray text-content text-df"&gt; 凯尔,你被自己的光芒变的盲目。 &lt;/view&gt; &lt;view class="bg-grey padding-sm radius margin-top-sm text-sm"&gt; &lt;view class="flex"&gt; &lt;view&gt;凯尔:&lt;/view&gt; &lt;view class="flex-sub"&gt;妹妹,你在帮他们给黑暗找借口吗?&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="margin-top-sm flex justify-between"&gt; &lt;view class="text-gray text-df"&gt;2018年12月4日&lt;/view&gt; &lt;view&gt; &lt;text class="cuIcon-appreciatefill text-red"&gt;&lt;/text&gt; &lt;text class="cuIcon-messagefill text-gray margin-left-sm"&gt;&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item"&gt; &lt;view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"&gt;&lt;/view&gt; &lt;view class="content"&gt; &lt;view class="text-grey"&gt;凯尔&lt;/view&gt; &lt;view class="text-gray text-content text-df"&gt; 妹妹,如果不是为了飞翔,我们要这翅膀有什么用? &lt;/view&gt; &lt;view class="bg-grey padding-sm radius margin-top-sm text-sm"&gt; &lt;view class="flex"&gt; &lt;view&gt;莫甘娜:&lt;/view&gt; &lt;view class="flex-sub"&gt;如果不能立足于大地,要这双脚又有何用?&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="margin-top-sm flex justify-between"&gt; &lt;view class="text-gray text-df"&gt;2018年12月4日&lt;/view&gt; &lt;view&gt; &lt;text class="cuIcon-appreciate text-gray"&gt;&lt;/text&gt; &lt;text class="cuIcon-messagefill text-gray margin-left-sm"&gt;&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>

页面列表

ITEM_HTML