微信小程序开发指南

基于ColorUI的组件化页面开发


菜单列表

<h1>菜单列表</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=c6e2c90627c9c62e09e7380aba603f9b&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}"&gt; &lt;view class="cu-item {{menuArrow?'arrow':''}}"&gt; &lt;view class="content"&gt; &lt;text class="cuIcon-circlefill text-grey"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;图标 + 标题&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item {{menuArrow?'arrow':''}}"&gt; &lt;view class="content"&gt; &lt;image src="/images/logo.png" class="png" mode="aspectFit"&gt;&lt;/image&gt; &lt;text class="text-grey"&gt;图片 + 标题&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item {{menuArrow?'arrow':''}}"&gt; &lt;button class="cu-btn content" open-type="contact"&gt; &lt;text class="cuIcon-btn text-olive"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;Open-type 按钮&lt;/text&gt; &lt;/button&gt; &lt;/view&gt; &lt;view class="cu-item {{menuArrow?'arrow':''}}"&gt; &lt;navigator class="content" hover-class="none" url="../list/list" open-type="redirect"&gt; &lt;text class="cuIcon-discoverfill text-orange"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;Navigator 跳转&lt;/text&gt; &lt;/navigator&gt; &lt;/view&gt; &lt;view class="cu-item {{menuArrow?'arrow':''}}"&gt; &lt;view class="content"&gt; &lt;text class="cuIcon-emojiflashfill text-pink"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;头像组&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;view class="cu-avatar-group"&gt; &lt;view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10004.jpg);"&gt;&lt;/view&gt; &lt;view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10003.jpg);"&gt;&lt;/view&gt; &lt;view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg);"&gt;&lt;/view&gt; &lt;view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"&gt;&lt;/view&gt; &lt;/view&gt; &lt;text class="text-grey text-sm"&gt;4 人&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item {{menuArrow?'arrow':''}}"&gt; &lt;view class="content"&gt; &lt;text class="cuIcon-btn text-green"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;按钮&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;button class="cu-btn round bg-green shadow"&gt; &lt;text class="cuIcon-upload"&gt;&lt;/text&gt; 上传&lt;/button&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item {{menuArrow?'arrow':''}}"&gt; &lt;view class="content"&gt; &lt;text class="cuIcon-tagfill text-red"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;标签&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;view class="cu-tag round bg-orange light"&gt;音乐&lt;/view&gt; &lt;view class="cu-tag round bg-olive light"&gt;电影&lt;/view&gt; &lt;view class="cu-tag round bg-blue light"&gt;旅行&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item {{menuArrow?'arrow':''}}"&gt; &lt;view class="content"&gt; &lt;text class="cuIcon-warn text-green"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;文本&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;text class="text-grey text-sm"&gt;小目标还没有实现!&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item"&gt; &lt;view class="content padding-tb-sm"&gt; &lt;view&gt; &lt;text class="cuIcon-clothesfill text-blue margin-right-xs"&gt;&lt;/text&gt; 多行Item&lt;/view&gt; &lt;view class="text-gray text-sm"&gt; &lt;text class="cuIcon-infofill margin-right-xs"&gt;&lt;/text&gt; 小目标还没有实现!&lt;/view&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;switch class="switch-sex sm" bindchange="switchSex"&gt;&lt;/switch&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>

页面列表

ITEM_HTML