列表

列表主要就是 cu-list 和 cu-item 的配合使用

# 宫格列表

宫格列表就是列表结合 grid 布局设计出的样式
通过 col-1|... 可以设置每行的个数，取值 1~5，默认有边框，可以加类名 no-border 去除边框
cu-item 里就是图标加文字，图标可以设置数字角标
可以在通过遍历循环的变量设置对应的图标、名称等

演示代码

<view class="cu-list grid col-3 no-border">
    <view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
        <view class="cuIcon-cardboardfill text-grey">
            <view class="cu-tag badge" v-if="item.badge!=0">
                {{item.badge}}
            </view>
        </view>
        <text>{{item.name}}</text>
    </view>
</view>

<!-- data -->
return {
    cuIconList: [{
        cuIcon: 'cardboardfill',
        color: 'red',
        badge: 120,
        name: 'VR'
    }],
};

# 菜单列表

菜单列表就是列表加上类名 menu 设计出的样式
加上 class 类名 sm-border 设置每一行的短边框
加上 class 类名 card-menu 将列表设置成卡片样式
加上 class 类名 arrow 在列表子元素上添加arrow设置箭头

演示代码

<view class="cu-list menu sm-border card-menu">
    <!-- 图标 + 标题、arrow 带箭头 -->
    <view class="cu-item arrow">
        <view class="content">
            <text class="cuIcon-circlefill text-grey"></text>
            <text class="text-grey">图标 + 标题</text>
        </view>
    </view>

    <!-- 图片 + 标题 -->
    <view class="cu-item">
        <view class="content">
            <image src="/static/logo.png" class="png" mode="aspectFit"></image>
            <text class="text-grey">图片 + 标题</text>
        </view>
    </view>

    <!-- Open-type 按钮 -->
    <view class="cu-item">
        <button class="cu-btn content" open-type="contact">
            <text class="cuIcon-btn text-olive"></text>
            <text class="text-grey">Open-type 按钮</text>
        </button>
    </view>

    <!-- Navigator 跳转 -->
    <view class="cu-item">
        <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">
        <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/big10001.jpg);"></view>
                <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
                <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
                <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
            </view>
            <text class="text-grey text-sm">4 人</text>
        </view>
    </view>

    <!-- 按钮 -->
    <view class="cu-item">
        <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">
        <view class="content">
            <text class="cuIcon-tagfill text-red  margin-right-xs"></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">
        <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>

    <!-- 多行Item -->
    <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" @change="SwitchSex" :class="skin?'checked':''" :checked="skin?true:false"></switch>
        </view>
    </view>
</view>

<!-- data -->
return {
    skin: false,
};
<!-- js -->
SwitchSex(e) {
    this.skin = e.detail.value
},
<!-- css -->
.switch-sex::after {
    content: "\e716";
}

.switch-sex::before {
    content: "\e7a9";
}

# 消息列表

菜单列表就是列表加上类名 menu-avatar 设计出的样式
cu-item 里其实就 cu-avatar 和 content 两块内容
cu-avatar 是左侧头像，加上 round lg 即可，同时可以是方形、圆形、右上角加上数字标签
content 是右侧内容，基本可以完全自定义

演示代码，可直接复制使用

<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/big10001.jpg);"></view>
        <view class="content">
            <view class="text-grey">凯尔</view>
            <view class="text-gray text-sm flex">
                <view class="text-cut">
                    <text class="cuIcon-infofill text-red  margin-right-xs"></text>
                    我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
                </view>
            </view>
        </view>
        <view class="action">
            <view class="text-grey text-xs">22:20</view>
            <view class="cu-tag round bg-grey sm">5</view>
        </view>
    </view>

    <!-- 瓦洛兰之盾-塔里克 -->
    <view class="cu-item">
        <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
            <view class="cu-tag badge">99+</view>
        </view>
        <view class="content">
            <view class="text-grey">
                <view class="text-cut">瓦洛兰之盾-塔里克</view>
                <view class="cu-tag round bg-orange sm">战士</view>
            </view>
            <view class="text-gray text-sm flex">
                <view class="text-cut">
                    塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
                </view>
            </view>
        </view>
        <view class="action">
            <view class="text-grey text-xs">22:20</view>
            <view class="cuIcon-notice_forbid_fill text-gray"></view>
        </view>
    </view>

    <!-- 莫甘娜 -->
    <view class="cu-item ">
        <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
        <view class="content">
            <view class="text-pink"><view class="text-cut">莫甘娜</view></view>
            <view class="text-gray text-sm flex"> <view class="text-cut">凯尔，你被自己的光芒变的盲目！</view></view>
        </view>
        <view class="action">
            <view class="text-grey text-xs">22:20</view>
            <view class="cu-tag round bg-red sm">5</view>
        </view>
    </view>

    <!-- 伊泽瑞尔 -->
    <view class="cu-item grayscale">
        <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
        <view class="content">
            <view><view class="text-cut">伊泽瑞尔</view>
                <view class="cu-tag round bg-orange sm">断开连接...</view>
            </view>
            <view class="text-gray text-sm flex"> <view class="text-cut"> 等我回来一个打十个</view></view>
        </view>
        <view class="action">
            <view class="text-grey text-xs">22:20</view>
            <view class="cu-tag round bg-red sm">5</view>
        </view>
    </view>

    <!-- 瓦罗兰大陆-睡衣守护者-新手保护营 -->
    <view class="cu-item cur">
        <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
            <view class="cu-tag badge"></view>
        </view>
        <view class="content">
            <view>
                <view class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</view>
                <view class="cu-tag round bg-orange sm">6人</view>
            </view>
            <view class="text-gray text-sm flex">
                <view class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</view></view>
        </view>
        <view class="action">
            <view class="text-grey text-xs">22:20</view>
            <view class="cuIcon-notice_forbid_fill text-gray"></view>
        </view>
    </view>
</view>

# 列表左滑

提示

因为右侧预览图是 ifname 的原因，无法监听右滑事件，点此查看 ColorUI 在线展示 (opens new window)，

基于消息列表
用户开始触摸时，获取触摸点到盒子左侧的距离，根据触摸结束时的距离与开始距离作比较，判断出用户滑动的方向，如果是左滑，则添加类名 move-cur，就是将该项左移 260upx，右滑则回到原位不变。
除了置顶、删除，还可以自定义其它的，不过得注意计算左移的宽度

演示代码

<view class="cu-list menu-avatar">
	<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 4" :key="index"
	 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
		<view class="cu-avatar round lg" :style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]"></view>
		<view class="content">
			<view class="text-grey">文晓港</view>
			<view class="text-gray text-sm">
				<text class="cuIcon-infofill text-red  margin-right-xs"></text> 消息未送达</view>
		</view>
		<view class="action">
			<view class="text-grey text-xs">22:20</view>
			<view class="cu-tag round bg-grey sm">5</view>
		</view>
		<view class="move">
			<view class="bg-grey">置顶</view>
			<view class="bg-red">删除</view>
		</view>
	</view>
</view>
 
<script>
	export default {
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		methods: {
			// ListTouch触摸开始，获取触摸点距盒子左侧的距离
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向，
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

# 列表相关class

class类名	说明	可选值
cu-list	列表必选值	——
cu-item	列表子元素	——
no-border	无边框	——
menu	菜单列表	——
sm-border	短边框	——
card-menu	卡片样式的菜单列表	——
arrow	右箭头	——
menu-avatar	消息列表（带头像）	——
cu-avatar	头像	——
content	内容	——
grayscale	灰度（background-color: #f5f5f5）	——
cur	background-color: #fcf7e9
move-cur	左移（transform: translateX(-260upx)）

上次更新: 2024/05/01, 21:37:52

← 导航栏卡片→