微信小程序开发指南

基于ColorUI的组件化页面开发


动态类卡片

动态类卡片

  • 样式图例

  • 示例代码
<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>

页面列表

ITEM_HTML