mjz update
This commit is contained in:
mjz
@@ -5,7 +5,7 @@ permalink: /pages/basics/tag
|
|||||||
article: false
|
article: false
|
||||||
---
|
---
|
||||||
|
|
||||||
需要设置成标签的元素加上 class `cu-tag` 即可
|
需要设置成标签的元素加上 class 类名 `cu-tag` 即可
|
||||||
|
|
||||||
## 标签形状
|
## 标签形状
|
||||||
> css 代码
|
> css 代码
|
||||||
@@ -111,7 +111,7 @@ article: false
|
|||||||
|
|
||||||
## 数字标签
|
## 数字标签
|
||||||
|
|
||||||
父容器一般为头像 `cu-avatar`，其中包裹**标签**，加入样式 `.badge`
|
父容器一般为头像 `cu-avatar`，其中包裹**标签**，class 为 `cu-tag badge`，元素内部没有内容，则默认为红色圆点
|
||||||
|
|
||||||
> 演示代码 可对比右侧预览
|
> 演示代码 可对比右侧预览
|
||||||
```vue
|
```vue
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ permalink: /pages/basics/avatar
|
|||||||
article: false
|
article: false
|
||||||
---
|
---
|
||||||
|
|
||||||
需要设置成头像的元素加上 class `cu-avatar`，然后再设置 css 样式 `background-image` 即可
|
需要设置成头像的元素加上 class 类名 `cu-avatar`，然后再设置 css 样式 `background-image` 即可
|
||||||
|
|
||||||
## 头像形状
|
## 头像形状
|
||||||
> css 代码
|
> css 代码
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ permalink: /pages/basics/progress
|
|||||||
article: false
|
article: false
|
||||||
---
|
---
|
||||||
|
|
||||||
父容器加上 class `cu-progress`，该容器内放一个元素加上背景 `.bg-red|...`，设置样式 `width: '10%'`，10% 就是该进度条的所占比例。
|
父容器加上 class 类名 `cu-progress`，该容器内放一个元素加上背景 `.bg-red|...`，设置样式 `width: '10%'`，10% 就是该进度条的所占比例。
|
||||||
|
|
||||||
子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 `width` 属性，配合动态变量即可做到好看的动画效果
|
子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 `width` 属性，配合动态变量即可做到好看的动画效果
|
||||||
|
|
||||||
@@ -75,7 +75,7 @@ article: false
|
|||||||
|
|
||||||
## 进度条颜色
|
## 进度条颜色
|
||||||
|
|
||||||
子容器加上 class `bg-red|...`
|
子容器加上 class 类名 `bg-red|...`
|
||||||
|
|
||||||
> 演示代码
|
> 演示代码
|
||||||
```vue
|
```vue
|
||||||
@@ -88,7 +88,7 @@ article: false
|
|||||||
|
|
||||||
父容器加上 class `striped`，进度条就会以条纹形式展示。
|
父容器加上 class `striped`，进度条就会以条纹形式展示。
|
||||||
|
|
||||||
再加上 class `active`，进度条纹便以动画形式展示。
|
再加上 class 类名 `active`，进度条纹便以动画形式展示。
|
||||||
|
|
||||||
> 演示代码
|
> 演示代码
|
||||||
```vue
|
```vue
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ article: false
|
|||||||
---
|
---
|
||||||
|
|
||||||
## 边框
|
## 边框
|
||||||
在需要加边框的元素加上 class `solid`，加粗的就是 `solids`，然后还有单独四个不同的方向 `solid-top|...`
|
在需要加边框的元素加上 class 类名 `solid`，加粗的就是 `solids`，然后还有单独四个不同的方向 `solid-top|...`
|
||||||
|
|
||||||
> css 代码
|
> css 代码
|
||||||
```css
|
```css
|
||||||
@@ -28,7 +28,7 @@ article: false
|
|||||||
|
|
||||||
## 阴影
|
## 阴影
|
||||||
|
|
||||||
在需要加阴影的元素加上 class `shadow` 即可
|
在需要加阴影的元素加上 class 类名 `shadow` 即可
|
||||||
|
|
||||||
> css 代码
|
> css 代码
|
||||||
```css
|
```css
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ permalink: /pages/basics/loading
|
|||||||
article: false
|
article: false
|
||||||
---
|
---
|
||||||
|
|
||||||
在需要设置加载的元素加上 class `cu-load`，可以设置自己喜欢的背景颜色 `.bg-red|...`
|
在需要设置加载的元素加上 class 类名 `cu-load`，可以设置自己喜欢的背景颜色 `.bg-red|...`
|
||||||
|
|
||||||
加载状态 `loading` 正在加载中，`over` 加载完成，`erro` 加载失败
|
加载状态 `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，控制进度
|
容器里第一个就是加载的进度条，需要加上 class `load-progress-bar bg-green|...`，通过动态 style，控制进度
|
||||||
|
|
||||||
|
|||||||
@@ -17,3 +17,230 @@ article: false
|
|||||||
2. `pages.json` 文件中的 `pages` 数组中第一项表示应用首页，如果项目有引导页，则根据项目的逻辑来做调整。
|
2. `pages.json` 文件中的 `pages` 数组中第一项表示应用首页，如果项目有引导页，则根据项目的逻辑来做调整。
|
||||||
|
|
||||||
3. 示例中通过变量 `PageCur` 来切换不同 `tabBar` 页面，控制 `tabBar` 图标文字的样式切换，同时也控制需要显示对应 `tabBar` 的页面（组件引入）。
|
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>
|
||||||
|
```
|
||||||
@@ -1,5 +1,67 @@
|
|||||||
---
|
---
|
||||||
title: 标题操作条
|
title: 标题操作条
|
||||||
date: 2023-06-02 23:21:17
|
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>
|
||||||
|
```
|
||||||
|
|||||||
@@ -1,5 +1,151 @@
|
|||||||
---
|
---
|
||||||
title: 顶部操作条
|
title: 顶部操作条
|
||||||
date: 2023-06-02 23:21:33
|
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
140
docs/10.文档/30.交互组件/10.操作条/40.搜索&按钮组&输入操作条.md
Normal 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
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: 搜索操作条
|
|
||||||
date: 2023-06-02 23:22:10
|
|
||||||
permalink: /pages/f2dfd8/
|
|
||||||
---
|
|
||||||
@@ -5,10 +5,89 @@ permalink: /pages/component/nav
|
|||||||
article: false
|
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
|
```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>
|
||||||
|
```
|
||||||
@@ -5,10 +5,330 @@ permalink: /pages/component/list
|
|||||||
article: false
|
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