molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
This commit is contained in:
mjz
2023-06-07 23:32:56 +08:00
parent 1e24f6a9d3
commit 75314726b8
12 changed files with 996 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/10.文档/20.基础元素/60.标签.md
View File

@@ -5,7 +5,7 @@ permalink: /pages/basics/tag
article: false
---
需要设置成标签的元素加上 class `cu-tag` 即可
需要设置成标签的元素加上 class 类名 `cu-tag` 即可
## 标签形状
> css 代码
@@ -111,7 +111,7 @@ article: false
## 数字标签
父容器一般为头像 `cu-avatar`，其中包裹**标签**，加入样式 `.badge`
父容器一般为头像 `cu-avatar`，其中包裹**标签**，class 为 `cu-tag badge`，元素内部没有内容，则默认为红色圆点
> 演示代码 可对比右侧预览
```vue

2
docs/10.文档/20.基础元素/70.头像.md
View File

@@ -5,7 +5,7 @@ permalink: /pages/basics/avatar
article: false
---
需要设置成头像的元素加上 class `cu-avatar`，然后再设置 css 样式 `background-image` 即可
需要设置成头像的元素加上 class 类名 `cu-avatar`，然后再设置 css 样式 `background-image` 即可
## 头像形状
> css 代码

6
docs/10.文档/20.基础元素/80.进度条.md
View File

@@ -5,7 +5,7 @@ permalink: /pages/basics/progress
article: false
---
父容器加上 class `cu-progress`，该容器内放一个元素加上背景 `.bg-red|...`，设置样式 `width: '10%'`，10% 就是该进度条的所占比例。
父容器加上 class 类名 `cu-progress`，该容器内放一个元素加上背景 `.bg-red|...`，设置样式 `width: '10%'`，10% 就是该进度条的所占比例。
子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 `width` 属性，配合动态变量即可做到好看的动画效果
@@ -75,7 +75,7 @@ article: false
## 进度条颜色
子容器加上 class `bg-red|...`
子容器加上 class 类名 `bg-red|...`
> 演示代码
```vue
@@ -88,7 +88,7 @@ article: false
父容器加上 class `striped`，进度条就会以条纹形式展示。
再加上 class `active`，进度条纹便以动画形式展示。
再加上 class 类名 `active`，进度条纹便以动画形式展示。
> 演示代码
```vue

4
docs/10.文档/20.基础元素/90.边框阴影.md
View File

@@ -6,7 +6,7 @@ article: false
---
## 边框
在需要加边框的元素加上 class `solid`，加粗的就是 `solids`，然后还有单独四个不同的方向 `solid-top|...`
在需要加边框的元素加上 class 类名 `solid`，加粗的就是 `solids`，然后还有单独四个不同的方向 `solid-top|...`
> css 代码
```css
@@ -28,7 +28,7 @@ article: false
## 阴影
在需要加阴影的元素加上 class `shadow` 即可
在需要加阴影的元素加上 class 类名 `shadow` 即可
> css 代码
```css

6
docs/10.文档/20.基础元素/91.加载.md
View File

@@ -5,7 +5,7 @@ permalink: /pages/basics/loading
article: false
---
在需要设置加载的元素加上 class `cu-load`，可以设置自己喜欢的背景颜色 `.bg-red|...`
在需要设置加载的元素加上 class 类名 `cu-load`，可以设置自己喜欢的背景颜色 `.bg-red|...`
加载状态 `loading` 正在加载中，`over` 加载完成，`erro` 加载失败
@@ -38,7 +38,7 @@ article: false
## 弹窗加载
父容器加上 class `cu-load load-modal`，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容
父容器加上 class 类名 `cu-load load-modal`，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容
可以在弹窗里面放文字、带颜色的图标、静态图片等
@@ -53,7 +53,7 @@ article: false
## 进度条加载
父容器加上 class `load-progress show|hide`，动态变量控制 class `show 和 hide`，动态 style 设置距离顶部的高度 `top: 高度px`
父容器加上 class 类名 `load-progress show|hide`，动态变量控制 class `show 和 hide`，动态 style 设置距离顶部的高度 `top: 高度px`
容器里第一个就是加载的进度条，需要加上 class `load-progress-bar bg-green|...`，通过动态 style，控制进度

227
docs/10.文档/30.交互组件/10.操作条/10.底部操作条.md
View File

@@ -17,3 +17,230 @@ article: false
2. `pages.json` 文件中的 `pages` 数组中第一项表示应用首页，如果项目有引导页，则根据项目的逻辑来做调整。
3. 示例中通过变量 `PageCur` 来切换不同 `tabBar` 页面，控制 `tabBar` 图标文字的样式切换，同时也控制需要显示对应 `tabBar` 的页面（组件引入）。
::: details 点此查看官方示例
```vue
<template>
<view>
<!-- 这三个是对应的页面 -->
<basics v-if="PageCur=='basics'"></basics>
<components v-if="PageCur=='component'"></components>
<plugin v-if="PageCur=='plugin'"></plugin>
<!-- 底部操作条 -->
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="basics">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
</view>
<view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
</view>
<view class="action" @click="NavChange" data-cur="component">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
</view>
<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
</view>
<view class="action" @click="NavChange" data-cur="plugin">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
</view>
<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
PageCur: 'basics'
}
},
methods: {
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur
}
}
}
</script>
```
:::
### tab 操作条实现
1. 操作条的父容器需求加上 class 类名 `cu-bar 和 tabbar`，同时可以加上 `bg-white|...` `shadow|...` 等样式来优化操作条。
2. **固定底部**：需要操作条固定在底部加上 class 类名 `foot` 即可。
3. 每一个 tab 的元素需要加上 class 类名 `action`，该 tab 里面则放置对应的图标和文字。
4. 展示不同的页面，以及 tab 需要用一个变量 `PageCur` 来进行控制。（官方示例 tab 图标是采用的图片，自定义也可以用图标）。
5. **数字标签**：对应的 tab 元素里可以加上 数字标签 `<view class="cu-tag badge">99+</view>`，**红色圆点**：数字标签里没有内容。
6. **中间的添加按钮**：`action` 同级加上 class 类名 `add-action`，其里面的图标换成 `button` 即可。
> **演示代码（可直接复制使用）**
```vue
<template>
<view>
<!-- 这里是对应的页面 -->
<homePage v-if="PageCur=='home'"></homePage>
<!-- 底部操作条：背景颜色、对应图标、字体颜色，可自定义 -->
<view class="cu-bar tabbar bg-white foot">
<!-- 首页 -->
<view class="action" :class="PageCur=='home'?'text-green':'text-gray'"
data-cur="home" @click="NavChange">
<view class="cuIcon-homefill"></view> 首页
</view>
<!-- 分类 -->
<view class="action" :class="PageCur=='similar'?'text-green':'text-gray'"
data-cur="similar" @click="NavChange">
<view class="cuIcon-similar"></view> 分类
</view>
<!-- 中间发布按钮 -->
<view class="action add-action" :class="PageCur=='sub'?'text-green':'text-gray'"
data-cur="sub" @click="NavChange">
<button class="cu-btn cuIcon-add bg-green shadow"></button>
发布
</view>
<!-- 购物车、右上角有数字角标 -->
<view class="action" :class="PageCur=='cart'?'text-green':'text-gray'"
data-cur="cart" @click="NavChange">
<view class="cuIcon-cart">
<!-- 数字角标 -->
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<!-- 我的、左上角红色圆点 -->
<view class="action" :class="PageCur=='mine'?'text-green':'text-gray'"
data-cur="mine" @click="NavChange">
<view class="cuIcon-my">
<!-- 红色圆点（数字角标） -->
<view class="cu-tag badge"></view>
</view>
我的
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
PageCur: 'home'
}
},
methods: {
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur
}
}
}
</script>
```
### 购物车底部操作条
1. 操作条的父容器需求加上 class 类名 `cu-bar 和 tabbar`，还有一个 `shop`，同时可以加上 `bg-white|...` `shadow|...` 等样式来优化操作条。
2. **固定底部**：需要操作条固定在底部加上 class 类名 `foot` 即可。
3. 每一个需要操作的元素需要加上 class 类名 `action`，该 `action` 元素里面则放置对应的图标和文字以及按钮。
4. **数字标签**：对应的 `action` 元素里可以加上 数字标签 `<view class="cu-tag badge">99+</view>`，**红色圆点**：数字标签里没有内容。
5. **立即订购**：和 `action` 元素同级的 view 加上 class 类名 `submit bg-red|...`，该元素会默认占据剩余的宽度，从右侧预览图知道，可以是三个 `action` 元素加上一个 `submit` 元素，也可以是两个 `action` 元素加上两个 `submit` 元素。
6. **立即订购的第二种样式**：上面一种是默认撑宽的元素，第二种则是再该元素里放置一个自定义的按钮，实现为 `action` 同级元素加上 class 类名 `btn-group`，相当于把第五条 `submit` 换成 `btn-group`；然后 `btn-group` 里再放置自定义按钮。
> **演示代码（可直接复制使用）**
```vue
<!-- 右侧预览图，第一个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action text-orange">
<view class="cuIcon-favorfill"></view> 已收藏
</view>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-red submit">立即订购</view>
</view>
<!-- 右侧预览图，第二个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-orange submit">加入购物车</view>
<view class="bg-red submit">立即订购</view>
</view>
<!-- 右侧预览图，第三个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class=" cuIcon-shop"></view> 店铺
</view>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="btn-group">
<button class="cu-btn bg-red round shadow-blur">立即订购</button>
</view>
</view>
<!-- 右侧预览图，第四个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view> 客服
</button>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="btn-group">
<button class="cu-btn bg-orange round shadow-blur">加入购物车</button>
<button class="cu-btn bg-red round shadow-blur">立即订购</button>
</view>
</view>
```

64
docs/10.文档/30.交互组件/10.操作条/20.标题操作条.md
View File

@@ -1,5 +1,67 @@
---
title: 标题操作条
date: 2023-06-02 23:21:17
permalink: /pages/43ebee/
permalink: /pages/component/bar/title
article: false
---
标题操作条就是纯粹的样式，右侧预览图滑到标题操作条，直接复制对应代码到项目对应的位置即可
演示代码里有代码注释，一条对应一条，复制即可
### 演示代码
```vue
<view class="box">
// 第一、二种都是标题和类似边框的组合样式，添加 border-title 类名
// 底部样式是 text 标签的 last-child 选择器设置的，可以自定义颜色和长度
<view class="cu-bar bg-white">
<view class="action border-title">
<text class="text-xl text-bold">关于我们</text>
<text class="bg-grey" style="width:2rem"></text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action border-title">
<text class="text-xl text-bold text-blue">关于我们</text>
<text class="bg-gradual-blue" style="width:3rem"></text>
</view>
</view>
// 第三、四这两种和上面的原理相同，添加的是 sub-title 类名，底部可以设置文字
<view class="cu-bar bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-green">关于我们</text>
<text class="bg-green"></text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action sub-title">
<text class="text-xl text-bold text-blue">关于我们</text>
<text class="text-ABC text-blue">about</text>
</view>
</view>
// 第五种主要是类名 self-end，设置了最后一行字的位置，就是 css 属性 align-self: flex-end （详情可以去看看 flex 布局）
<view class="cu-bar bg-white">
<view class="action">
<text class="text-xl text-bold">关于我们</text>
<text class="text-Abc text-gray self-end margin-left-sm">about</text>
</view>
</view>
// 最后这两种就是简单的添加了两个图标，没什么好说的
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-title text-green"></text>
<text class="text-xl text-bold">关于我们</text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="cuIcon-titles text-green"></text>
<text class="text-xl text-bold">关于我们</text>
</view>
</view>
</view>
```

148
docs/10.文档/30.交互组件/10.操作条/30.顶部操作条.md
View File

@@ -1,5 +1,151 @@
---
title: 顶部操作条
date: 2023-06-02 23:21:33
permalink: /pages/733677/
permalink: /pages/component/bar/top
article: false
---
顶部操作条设置属于自定义导航栏，接下来会给大家讲解配置。
## 自定义操作条（导航栏）
1. 导航栏作为常用组件 `color-ui` 里有做简单封装，你也可以直接复制代码结构自己修改，达到个性化目的。
2. `App.vue` 获得系统信息
```js
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP-WEIXIN
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})
},
```
3. 需要设置导航栏的页面配置 `pages.json` 配置取消系统导航栏，如下配置：
```js
"globalStyle": {
"navigationStyle": "custom"
},
```
4. 复制 `color-ui` 代码结构可以直接使用，注意全局变量的获取。
5. 使用封装，在 main.js 引入 cu-custom 组件，cu-custom 组件里可以根据自己的需求来自定义。
```vue
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
```
6. 对应的页面 index.vue 可以直接调用即可。
```vue
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
```
7. 以下是对应属性参数，自定义也可基于官方封装好的。
| 参数 | 作用 | 类型 | 默认值 |
| -------- | ---------------- | ------- | ------ |
| bgColor | 背景颜色类名 | String | '' |
| isBack | 是否开启返回 | Boolean | false |
| isCustom | 是否开启左侧胶囊 | Boolean | false |
| bgImage | 背景图片路径 | String | '' |
| slot块 | 作用 |
| -------- | ---------------------------------- |
| backText | 返回时的文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄！) |
## 使用原生小程序开发
### 从现有项目开始
下载源码解压获得`/demo`，复制目录下的 `/colorui` 文件夹到你的项目根目录
```
App.wxss` 引入关键Css `main.wxss` `icon.wxss
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的项目css */
....
```
### 从新项目开始
下载源码解压获得`/template`，复制`/template`并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了
### 使用自定义导航栏
导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。
`App.js` 获得系统信息
```
onLaunch: function() {
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
}
})
},
```
`App.json` 配置取消系统导航栏,并全局引入组件
```
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"cu-custom":"/colorui/components/cu-custom"
}
```
`page.wxml` 页面可以直接调用了
```
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
</cu-custom>
```
| 参数 | 作用 | 类型 | 默认值 |
| -------- | ---------------- | ------- | ------ |
| bgColor | 背景颜色类名 | String | '' |
| isBack | 是否开启返回 | Boolean | false |
| isCustom | 是否开启左侧胶囊 | Boolean | false |
| bgImage | 背景图片路径 | String | '' |
| slot块 | 作用 |
| -------- | ---------------------------------- |
| backText | 返回时的文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄！) |

140
docs/10.文档/30.交互组件/10.操作条/40.搜索&按钮组&输入操作条.md Normal file
View File

@@ -0,0 +1,140 @@
---
title: 搜索&按钮组&输入操作条
date: 2023-06-02 23:22:10
permalink: /pages/component/bar/search
article: false
---
## 搜索操作条
搜索操作条主要就是search-form，配合 round 和 radius 设置 input 框的样式，然后再用 fixed 固定到顶部即可。
> 演示代码
```html
<!-- 第一个：搜索按钮在右边 -->
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-green shadow-blur round">搜索</button>
</view>
</view>
<!-- 第二个：右边是广州选择位置 -->
<view class="cu-bar search bg-white">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
confirm-type="search"></input>
</view>
<view class="action">
<text>广州</text>
<text class="cuIcon-triangledownfill"></text>
</view>
</view>
<!-- 第三个：右边是广州选择位置（红色背景） -->
<view class="cu-bar bg-red search">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big114004.jpg);"></view>
<view class="search-form radius">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
confirm-type="search"></input>
</view>
<view class="action">
<text>广州</text>
<text class="cuIcon-triangledownfill"></text>
</view>
</view>
<!-- 第四个：右边是取消 -->
<view class="cu-bar bg-cyan search">
<view class="search-form radius">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
confirm-type="search"></input>
</view>
<view class="action">
<text class="cuIcon-close"></text>
<text>取消</text>
</view>
</view>
<!-- data -->
return {
InputBottom: 0
};
<!-- js -->
InputFocus(e) {
this.InputBottom = e.detail.height
},
InputBlur(e) {
this.InputBottom = 0
}
```
## 按钮组操作条
就是几个按钮，cu-bar 操作条类名就是为这个按钮组设置了平铺的样式
```html
<view class="cu-bar btn-group">
<button class="cu-btn bg-green shadow-blur round lg">保存</button>
</view>
<view class="btn-group">
<button class="cu-btn bg-green shadow-blur">保存</button>
<button class="cu-btn text-green line-green shadow">上传</button>
</view>
<view class="cu-bar btn-group">
<button class="cu-btn bg-green shadow-blur round">保存</button>
<button class="cu-btn bg-blue shadow-blur round">提交</button>
</view>
```
## 输入操作条
主要由cu-bar和input设置出大体样式，内部填充自定义，
```html
<view class="cu-bar input">
<view class="action">
<text class="cuIcon-sound text-grey"></text>
</view>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" :focus="false" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="cuIcon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow-blur">发送</button>
</view>
<view class="cu-bar input">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
<view class="action">
<text class="cuIcon-roundaddfill text-grey"></text>
</view>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="cuIcon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow-blur">发送</button>
</view>
<!-- data -->
return {
InputBottom: 0
};
<!-- js -->
InputFocus(e) {
this.InputBottom = e.detail.height
},
InputBlur(e) {
this.InputBottom = 0
}
```

5
docs/10.文档/30.交互组件/10.操作条/40.搜索操作条.md
View File

@@ -1,5 +0,0 @@
---
title: 搜索操作条
date: 2023-06-02 23:22:10
permalink: /pages/f2dfd8/
---

87
docs/10.文档/30.交互组件/20.导航栏.md
View File

@@ -5,10 +5,89 @@ permalink: /pages/component/nav
article: false
---
## 操作条
nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的时候一些属性可以参考一下 [uni-app 的文档](https://uniapp.dcloud.io/component/scroll-view)，类名 nav 和 cu-item 是必选值
### 默认
通过一个变量来控制当前已选中的tab
::: details 点此查看页面源代码
页面位置：`/pages/component/nav`
```vue
<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
Tab{{index}}
</view>
</scroll-view>
<script>
export default {
data() {
return {
TabCur: 0,
scrollLeft: 0
};
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
}
}
}
</script>
```
### 居中
父容器加上 class 类名 `text-center`
```html
<scroll-view scroll-x class="bg-white nav text-center">
<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
Tab{{index}}
</view>
</scroll-view>
```
### 平分
设置 flex 和 flex-sub 实现弹性布局，flex-sub 就是 css 属性 flex:1，将弹性盒子内子元素按照 1:1:1:1 来分配空间
```html
<scroll-view scroll-x class="bg-white nav">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in 4" :key="index" @tap="tabSelect" :data-id="index">
Tab{{index}}
</view>
</view>
</scroll-view>
```
### 背景
加上 class 类名 `bg-red|...`，参考背景
```html
<scroll-view scroll-x class="bg-red nav text-center">
<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
Tab{{index}}
</view>
</scroll-view>
```
### 图标
里面 tab 文字前加上图标 `cuIcon-`，参照图标
```html
<scroll-view scroll-x class="bg-green nav text-center">
<view class="cu-item" :class="0==TabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
<text class="cuIcon-camerafill"></text> 数码
</view>
<view class="cu-item" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
<text class="cuIcon-upstagefill"></text> 排行榜
</view>
<view class="cu-item" :class="2==TabCur?'text-white cur':''" @tap="tabSelect" data-id="2">
<text class="cuIcon-clothesfill"></text> 皮肤
</view>
</scroll-view>
```
:::

328
docs/10.文档/30.交互组件/30.列表.md
View File

@@ -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>
```