mjz update
This commit is contained in:
mjz
+325
-5
@@ -5,10 +5,330 @@ permalink: /pages/component/list
|
||||
article: false
|
||||
---
|
||||
|
||||
## 操作条
|
||||
列表主要就是 `cu-list` 和 `cu-item` 的配合使用
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/component/list`
|
||||
```vue
|
||||
## 宫格列表
|
||||
|
||||
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>
|
||||
```
|
||||
Reference in New Issue
Block a user