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