---
title: 列表
date: 2023-05-28 16:17:38
permalink: /pages/component/list
article: false
---

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

## 宫格列表

1. 宫格列表就是列表结合 grid 布局设计出的样式

2. 通过 `col-1|...` 可以设置每行的个数，取值 1~5，默认有边框，可以加类名 `no-border` 去除边框

3. `cu-item` 里就是图标加文字，图标可以设置数字角标

4. 可以在通过遍历循环的变量设置对应的图标、名称等

> 演示代码
```html
<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'
    }],
};
```


## 菜单列表

1. 菜单列表就是列表加上类名 `menu` 设计出的样式

2. 加上 class 类名 `sm-border` 设置每一行的短边框

3. 加上 class 类名 `card-menu` 将列表设置成卡片样式 

4. 加上 class 类名 `arrow` 在列表子元素上添加arrow设置箭头

> 演示代码
```html
<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";
}
```


## 消息列表

1. 菜单列表就是列表加上类名 `menu-avatar` 设计出的样式

2. `cu-item` 里其实就 `cu-avatar` 和 `content` 两块内容

3. `cu-avatar` 是左侧头像，加上 `round lg` 即可，同时可以是方形、圆形、右上角加上数字标签

4. `content` 是右侧内容，基本可以完全自定义

> 演示代码，可直接复制使用
```html
<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>
```


## 列表左滑

::: tip
因为右侧预览图是 `ifname` 的原因，无法监听右滑事件，[点此查看 ColorUI 在线展示](https://miren123.gitee.io/colorui-h5/#/pages/component/list/)，
:::

1. 基于消息列表

2. 用户开始触摸时，获取触摸点到盒子左侧的距离，根据触摸结束时的距离与开始距离作比较，判断出用户滑动的方向，如果是左滑，则添加类名 `move-cur`，就是将该项左移 **260upx**，右滑则回到原位不变。

3. 除了置顶、删除，还可以自定义其它的，不过得注意计算左移的宽度

> 演示代码
```html
<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)）||