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