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-18 13:41:09 +08:00
parent 0533aa0ebf
commit 1fdc7f8831
87 changed files with 2130 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,8 +10,11 @@ article: false
## 宫格列表
1. 宫格列表就是列表结合 grid 布局设计出的样式
2. 通过 `col-1|...` 可以设置每行的个数，取值 1~5，默认有边框，可以加类名 `no-border` 去除边框
3. `cu-item` 里就是图标加文字，图标可以设置数字角标
4. 可以在通过遍历循环的变量设置对应的图标、名称等
> 演示代码
@@ -42,8 +45,11 @@ return {
## 菜单列表
1. 菜单列表就是列表加上类名 `menu` 设计出的样式
2. 加上 class 类名 `sm-border` 设置每一行的短边框
3. 加上 class 类名 `card-menu` 将列表设置成卡片样式
4. 加上 class 类名 `arrow` 在列表子元素上添加arrow设置箭头
> 演示代码
@@ -172,8 +178,11 @@ SwitchSex(e) {
## 消息列表
1. 菜单列表就是列表加上类名 `menu-avatar` 设计出的样式
2. `cu-item` 里其实就 `cu-avatar` 和 `content` 两块内容
3. `cu-avatar` 是左侧头像，加上 `round lg` 即可，同时可以是方形、圆形、右上角加上数字标签
4. `content` 是右侧内容，基本可以完全自定义
> 演示代码，可直接复制使用
@@ -276,7 +285,9 @@ SwitchSex(e) {
:::
1. 基于消息列表
2. 用户开始触摸时，获取触摸点到盒子左侧的距离，根据触摸结束时的距离与开始距离作比较，判断出用户滑动的方向，如果是左滑，则添加类名 `move-cur`，就是将该项左移 **260upx**，右滑则回到原位不变。
3. 除了置顶、删除，还可以自定义其它的，不过得注意计算左移的宽度
> 演示代码

8
docs/10.文档/30.交互组件/40.卡片.md
View File

@@ -10,8 +10,11 @@ article: false
## 案例类卡片
1. `cu-card` 和 `case` 结合，在配合子元素的 `cu-item` 类名，写出案例类的样式
2. 内部其他样式可以根据其他类名自行设置，`cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除
3. 卡片上面是图片展示，右上角是标签，文字悬浮于图片上
4. 卡片下面就是一个消息列表
```html
@@ -46,8 +49,11 @@ article: false
## 动态类卡片
1. 该样式类似于 QQ 动态，由 `cu-card` 和 `dynamic` 结合，再配合子元素 `cu-item` 编写而成
2. 动态下方的评论需要添加类名 `comment`
3. 内部其他样式可以根据其他类名自行设置，`cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除
4. **动态图片内容**，官网给出两种样式，第一就是等高 `grid` 宫格图片，第二就是一张图片
```html
@@ -110,7 +116,9 @@ article: false
## 文章类卡片
1. 该卡片由 `cu-card` 和 `article` 结合，再配合子元素 `cu-item`
2. `cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除
3. 卡片里面内容分为 `title` 和 `content`，两个内容皆可自定义

12
docs/10.文档/30.交互组件/50.表单.md
View File

@@ -5,13 +5,14 @@ permalink: /pages/component/form
article: false
---
<!-- form表单是用form标签包裹，每一个子元素添加类名cu-form-group，行内自定义，title类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度 -->
## input输入框
1. `form` 表单最外层是用 `form` 标签包裹
2. 每一个子元素添加类名 `cu-form-group`，行内可以自定义，`input` 标签就是输入框
3. `title` 类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度
4. **行内没有 `input` 标签的话，`title` 后面的元素定位在行内右侧，有 `input` 标签的话，标签后的元素也是在行内右侧**
```html
@@ -58,6 +59,7 @@ article: false
## picker选择器
1. 对于表单中从底部谈起的选择器，写法与上述简单的input相同，而选择器picker的使用，建议查看官方代码
2. 后期会封装一个组件给大家用（暂无）
```html
@@ -254,6 +256,7 @@ RegionChange(e) {
## switch开关
1. 对于开关的样式，参考 `switch` 官方文档
2. 在微信小程序上，switch的color属性不生效，想要更改开关颜色，可以用颜色类名，直接写颜色就可以
```html
@@ -310,7 +313,9 @@ SwitchD(e) {
## radio单选框
1. 主要还是 `radio` 官方文档为主
2. 更改颜色同上，使用提供的颜色类名即可
3. 其默认样式是圆形全色中间有个√，可以通过类名radio更改形状为镂空中间一个点
```html
@@ -351,7 +356,9 @@ RadioChange(e) {
## checkbox复选框
1. 官方示例
2. 更改颜色同上，使用提供的颜色类名即可
3. 其默认样式是方形，可以通过类名 `round` 更改形状为圆形
```html
@@ -409,6 +416,7 @@ CheckboxChange(e) {
## 图片上传
1. 官方示例
2. `uniapp` [图片相关操作的API](https://uniapp.dcloud.net.cn/api/media/image.html#)
```vue

2
docs/10.文档/30.交互组件/60.时间轴.md
View File

@@ -8,6 +8,7 @@ article: false
## 默认时间轴
1. 时间轴默认结构如下代码，对应右侧预览图第一个6-17时间轴的样式
2. 由 `cu-timeline` 包裹 `cu-time` 和 `cu-item`，在 `item` 内编写内容，由 `content` 包裹
```html
@@ -24,6 +25,7 @@ article: false
## 彩色时间轴
1. 与默认的基本格式相同，只是自定义了内容框颜色和图标
2. 对应右侧彩色时间轴
```html

7
docs/10.文档/30.交互组件/70.聊天.md
View File

@@ -10,10 +10,15 @@ article: false
## 基本样式
1. 聊天的外部大框架是 `cu-chat`
2. `cu-item` 包裹某人的聊天信息
3. `self` 表示右侧自己的聊天样式
4. `main` 包含聊天内容
5. `date` 表示消息时间
6. `cu-info` 表示提示词
```html
@@ -50,7 +55,9 @@ article: false
## 其他聊天内容
1. 聊天内容除了语句，还有图片，语音消息，地理位置消息等
2. `main` 包含的聊天内容不止是消息框里的，还有消息框旁边的提示图标文字等
3. 消息框里的内容由 `content` 包裹
```html

17
docs/10.文档/30.交互组件/80.轮播.md
View File

@@ -8,6 +8,7 @@ article: false
## 全屏限高轮播
1. 添加类名 `screen-swiper`，宽度为全屏，高度自定义
2. 请直接参考 `swiper` [官方文档](https://uniapp.dcloud.net.cn/component/swiper.html#)，可以通过类名 `square-dot` 和 `round-dot` 定义小圆点样式
```vue
@@ -54,7 +55,9 @@ article: false
## 卡片式轮播
1. 在 `swiper` 标签上添加类名 `card-swiper`
2. 在 `swiper-item` 标签内的子元素上添加类名 `swiper-item`，
3. 示例中 `cardSwiper` 函数的主要作用是切换类名 `cur`，`cur` 的作用是实现轮播图片中间大，两边小的效果，就是 `transform的scale()`
```vue
@@ -195,4 +198,16 @@ cardSwiper(e) {
z-index: var(--index);
}
</style>
```
```
## 轮播图相关class
|class| 说明| 可选值|
|--| --| --|
|screen-swiper| 全屏限高轮播| ——|
|square-dot| 方形指示点| ——|
|round-dot| 圆形指示点| ——|
|card-swiper| 卡片式轮播| ——|
|swiper-item| 滑动切换区域（具体看示例） |——|
|tower-swiper| 堆叠式轮播 |——|
|tower-item| 堆叠式轮播子元素| ——|

241
docs/10.文档/30.交互组件/90.模态框.md
View File

@@ -5,10 +5,241 @@ permalink: /pages/component/modal
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/modal`
```vue
1. `cu-modal` 和 `cu-dialog` 为模态框必选值，所有模态框的大体框架都是 `cu-modal` 包裹 `cu-dialog`
2. `cu-dialog` 内部填充操作部分和信息展示部分，操作部分可以用 `cu-bar` 操作条来布局，信息展示就直接写
3. 弹框的显示隐藏是通过添加或移除类名 `show` 来实现的，示例中隐藏弹框是绑定 `tap` 调用 `hideModal` 事件，`hideModal` 函数内执行的语句就是将变量 `modalName` 赋值为 `null`，从而移除类名 `show`，你想让用户点击哪里隐藏弹框，就可以把 `hideModal` 事件绑定在哪里（比如设置点击遮罩层隐藏弹框，就把 `hideModal` 事件绑定在有类名 `cu-modal` 的标签上）
## 普通窗口
1. 就是 `cu-modal` 包裹 `cu-dialog`，只做信息的展示，没有交互效果
```html
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
```
:::
## 底部窗口
1. `cu-modal` 结合 `bottom-modal` 实现底部弹窗
```html
<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white">
<view class="action text-green">确定</view>
<view class="action text-blue" @tap="hideModal">取消</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
```
## 对话窗口
1. 对话窗口相较于普通窗口底部多了一些用户交互的操作
```html
//示例一
<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white justify-end">
<view class="action">
<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
<button class="cu-btn bg-green margin-left" @tap="hideModal">确定</button>
</view>
</view>
</view>
</view>
//示例二
<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub text-green " @tap="hideModal">
<text class="cuIcon-moneybag"></text>微信支付</view>
<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
<view class="action margin-0 flex-sub solid-left" @tap="hideModal">确定</view>
</view>
</view>
</view>
```
## 图片窗口
1. `cu-dialog` 里放置图片，也可自定义
```html
<view class="cu-modal" :class="modalName=='Image'?'show':''">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
<view class="cu-bar justify-end text-white">
<view class="action" @tap="hideModal">
<text class="cuIcon-close "></text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub solid-left" @tap="hideModal">我知道了</view>
</view>
</view>
</view>
```
## 单选窗口
1. 就是普通窗口内部结合 `radio` 标签编写的
```html
<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
<view class="cu-dialog" @tap.stop="">
<radio-group class="block" @change="RadioChange">
<view class="cu-list menu text-left">
<view class="cu-item" v-for="(item,index) in 5" :key="index">
<label class="flex justify-between align-center flex-sub">
<view class="flex-sub">Item {{index +1}}</view>
<radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
:value="'radio' + index"></radio>
</label>
</view>
</view>
</radio-group>
</view>
</view>
```
## 多选窗口
1. 配合 `grid` 布局自定义的
```vue
<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
<view class="cu-dialog" @tap.stop="">
<view class="cu-bar bg-white">
<view class="action text-blue" @tap="hideModal">取消</view>
<view class="action text-green" @tap="hideModal">确定</view>
</view>
<view class="grid col-3 padding-sm">
<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
:data-value="item.value"> {{item.name}}
<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
</button>
</view>
</view>
</view>
</view>
<script>
export default {
data() {
return {
modalName: null,
checkbox: [{value: 0,name: '10元',checked: false,hot: false,},
{value: 1,name: '20元',checked: true,hot: false,},
{value: 2,name: '30元',checked: true,hot: true,},
{value: 3,name: '60元',checked: false,hot: true,},
{value: 4,name: '80元',checked: false,hot: false,},
{value: 5,name: '100元',checked: false,hot: false,}
]
};
},
methods: {
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
ChooseCheckbox(e) {
let items = this.checkbox;
let values = e.currentTarget.dataset.value;
for (let i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) {
items[i].checked = !items[i].checked;
break
}
}
}
}
}
</script>
```
## 侧边抽屉
1. `cu-modal` 结合 `drawer-modal`，由 `justify-start` 和 `justify-end`决定抽屉方向
```html
//左侧抽屉
<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
<view class="cu-dialog basis-lg" @tap.stop="">
<view class="cu-list menu text-left">
<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
</view>
</view>
</view>
//右侧抽屉
<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
<view class="cu-dialog basis-lg" @tap.stop="" >
<view class="cu-list menu text-left">
<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
</view>
</view>
</view>
```
## 模态框相关class
|class |说明 |可选值|
|-- |-- |--|
|cu-modal |模态框必选值 |——|
|cu-dialog| 模态框子元素| ——|
|bottom-modal |底部弹框| ——|
|drawer-modal| 侧边弹框| ——|
|show| 显示弹框| ——|

118
docs/10.文档/30.交互组件/91.步骤条.md
View File

@@ -5,10 +5,120 @@ permalink: /pages/component/steps
article: false
---
## 操作条
`cu-steps` 步骤条必选值
## 基本用法
1. `cu-steps` 和 `cu-item` 配合使用
2. 对应右侧基本用法第一个
::: details 点此查看页面源代码
页面位置：`/pages/component/steps`
```vue
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
</view>
</view>
</view>
<script>
export default {
data() {
return {
basicsList: [{cuIcon: 'usefullfill',name: '开始'},
{cuIcon: 'radioboxfill',name: '等待'},
{cuIcon: 'roundclosefill',name: '错误'},
{cuIcon: 'roundcheckfill',name: '完成'
}],
basics: 0
};
},
methods: {
BasicsSteps() {
this.basics= this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
}
}
}
</script>
```
:::
1. 步骤条的颜色和图标都可以自定义
2. 对应右侧基本用法第二个
```html
<view class="bg-white padding margin-top-xs">
<view class="cu-steps">
<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
<text :class="index>basics?'cuIcon-title':'cuIcon-' + item.cuIcon"></text> {{item.name}}
</view>
</view>
</view>
```
1. 步骤之间的连接默认是横线，也可以通过类名 `steps-arrow` 换成箭头
2. 对应右侧基本用法第三个
```html
<view class="bg-white padding margin-top-xs">
<view class="cu-steps steps-arrow">
<view class="cu-item" :class="index>basics?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
</view>
</view>
</view>
```
## 数字完成
1. 通过类名 `num` 可以设置默认图标为数字，已完成且正确的图标为勾，已完成但错误的图标由类名 `err` 定义
```html
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
</view>
</view>
</view>
```
## 多级显示
1. 多级显示需要配合 `scroll-view` 标签使用 ，并增加类名 `steps-bottom`
```vue
<scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" :scroll-into-view="'scroll-' + scroll"
scroll-with-animation>
<view class="cu-item padding-lr-xl" :class="index>scroll?'':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
Level {{index + 1}} <text class="num" :data-index="index + 1"></text>
</view>
</scroll-view>
<script>
export default {
data() {
return {
scroll: 0
};
},
methods: {
ScrollSteps() {
this.scroll= this.scroll == 9 ? 0 : this.scroll + 1
}
}
}
</script>
```
## 步骤条相关class
|class |说明| 可选值|
|-- |--| --|
|cu-steps |步骤条必选值| ——|
|cu-item| 步骤条子元素| ——|
|num |数字步骤条未完成图标 |——|
|err| 错误图标| ——|
|steps-arrow |步骤条连接箭头 ——|
|steps-bottom |配合多级步骤条使用（图标在下，文字在上，放在其他步骤条样式会错乱）| ——|

213
docs/10.文档/40.插件扩展/10.索引列表.md
View File

@@ -1,14 +1,215 @@
---
title: 索引动画
title: 索引列表
date: 2023-05-28 16:17:38
permalink: /pages/plugin/indexes
article: false
---
## 操作条
## 使用
1. 索引列表主要由 `scroll-view` 标签实现，类名为 `indexes`，具体js逻辑请看源码
2. 我个人没有使用过这个，大家根据源码来看一下，我也有些地方没弄懂
::: details 点此查看页面源代码
页面位置：`/pages/plugin/indexes`
```vue
```
:::
<template>
<view>
<view class="cu-bar bg-white search fixed">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
</view>
</view>
<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - 50px)'}]"
:scroll-with-animation="true" :enable-back-to-top="true">
<block v-for="(item,index) in list" :key="index">
<!-- 这个'indexItem-' + item.name类名，整个colorUI，我也没找到它的作用，删了也没发现什么影响-->
<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
<view class="padding">{{item.name}}</view>
<view class="cu-list menu-avatar no-padding">
<view class="cu-item" v-for="(items,sub) in 2" :key="sub">
<view class="cu-avatar round lg">{{item.name}}</view>
<view class="content">
<view class="text-grey">{{item.name}}<text class="text-abc">{{list[sub].name}}</text>君</view>
<view class="text-gray text-sm">
有{{sub+2}}个主子需要伺候
</view>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
<view class="indexBar" :style="[{height:'calc(100vh - 50px)'}]">
<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur">
{{item.name}}</view>
</view>
</view>
<!--选择显示-->
<view v-show="!hidden" class="indexToast">
{{listCur}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
StatusBar: this.StatusBar,
CustomBar: this.CustomBar,
hidden: true,
listCurID: '',
list: [],
listCur: '',
};
},
onLoad() {
let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i);
}
this.list = list;
this.listCur = list[0];
},
onReady() {
let that = this;
//这两句大概知道什么意思，但是emmm,这个boxTop和barTop具体是什么数值，不是很理解
uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
that.boxTop = res.top
}).exec();
uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
that.barTop = res.top
}).exec()
},
methods: {
//获取文字信息
getCur(e) {
this.hidden = false;
this.listCur = this.list[e.target.id].name;
},
setCur(e) {
this.hidden = true;
this.listCur = this.listCur
},
//滑动选择Item
tMove(e) {
console.log(this.boxTop)
let y = e.touches[0].clientY,
offsettop = this.boxTop,
that = this;
//判断选择区域,只有在选择区才会生效
if (y > offsettop) {
// 这个num计算结果怎么就是字母列表的下标呢，我没想明白，望大佬指教
let num = parseInt((y - offsettop) / 20);
this.listCur = that.list[num].name
};
},
//触发全部开始选择
tStart() {
this.hidden = false
},
//触发结束选择
tEnd() {
this.hidden = true;
this.listCurID = this.listCur
},
//源码中有这个函数，但是这个页面中根本没有用到，删了没影响，我也不明白作者为什么写这个
indexSelect(e) {
let that = this;
let barHeight = this.barHeight;
let list = this.list;
let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
for (let i = 0; i < list.length; i++) {
if (scrollY < i + 1) {
that.listCur = list[i].name;
that.movableY = i * 20
return false
}
}
}
}
}
</script>
<style>
page {
padding-top: 100upx;
}
.indexes {
position: relative;
}
.indexBar {
position: fixed;
right: 0px;
bottom: 0px;
padding: 20upx 20upx 20upx 60upx;
display: flex;
align-items: center;
}
.indexBar .indexBar-box {
width: 40upx;
height: auto;
background: #fff;
display: flex;
flex-direction: column;
box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
border-radius: 10upx;
}
.indexBar-item {
flex: 1;
width: 40upx;
height: 40upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24upx;
color: #888;
}
movable-view.indexBar-item {
width: 40upx;
height: 40upx;
z-index: 9;
position: relative;
}
movable-view.indexBar-item::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 10upx;
height: 20upx;
width: 4upx;
background-color: #f37b1d;
}
.indexToast {
position: fixed;
top: 0;
right: 80upx;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
width: 100upx;
height: 100upx;
border-radius: 10upx;
margin: auto;
color: #fff;
line-height: 100upx;
text-align: center;
font-size: 48upx;
}
</style>
```

55
docs/10.文档/40.插件扩展/20.微动画.md
View File

@@ -5,10 +5,55 @@ permalink: /pages/plugin/animation
article: false
---
## 操作条
## 微动画
::: details 点此查看页面源代码
页面位置：`/pages/plugin/animation`
```vue
1. 加上类名 `animation-fade|...` 即可实现动画
2. 加上类名 `animation-reverse` 反向动画
3. 延迟动画加上 style `animation-delay: 1s`
```css
.animation-fade /* 淡入 */
.animation-scale-up /* 放大 */
.animation-scale-down /* 缩小 */
.animation-slide-top /* 从上向下滑动 */
.animation-slide-bottom /* 从下向上滑动 */
.animation-slide-left /* 从左向右滑动 */
.animation-slide-right /* 从右向左滑动 */
.animation-shake /* 摇动 */
```
:::
## gif动画
1. 看官方示例吧，不知道是不是路劲问题，还是咋，有几个显示不出来
```html
<view class="margin radius bg-gradual-green shadow-blur">
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100upx"></image>
</view>
<view class="margin flex">
<view class="bg-black flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
</view>
<view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
</view>
</view>
<view class="margin flex">
<view class="bg-gradual-blue flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
</view>
<view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
</view>
</view>
<view class="margin flex">
<view class="bg-white flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
</view>
<view class="bg-black flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
</view>
</view>
```

189
docs/10.文档/40.插件扩展/30.全屏抽屉.md
View File

@@ -5,10 +5,189 @@ permalink: /pages/plugin/drawer
article: false
---
## 操作条
## 全屏抽屉
1. 全屏抽屉效果主要分为三个部分，主要有三个类名
2. 第一个类名 `DrawerPage`，就是第一张图总体外部包裹的类名
3. 第二个类名 `DrawerClose`，用来包裹打开抽屉之后关闭部分
4. 第三个类名 `DrawerWindow`，就是打开的抽屉部分了
::: details 点此查看页面源代码
页面位置：`/pages/plugin/drawer`
```vue
```
:::
<template>
<view class="bg-gradual-blue">
// 全屏主体页面
<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block>
<block slot="content">全屏抽屉</block>
</cu-custom>
<view class='padding margin text-center'>
<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
打开抽屉
</view>
</view>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
<view class="content">
<text class="cuIcon-github text-grey"></text>
<text class="text-grey">{{index +1}}</text>
</view>
</view>
</view>
<view class='padding margin text-center'>
<view class='cu-btn bg-green lg block shadow radius margin-xl' @tap="showModal" data-target="viewModal">
打开抽屉
</view>
</view>
</scroll-view>
// 关闭部分
<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
<text class="cuIcon-pullright"></text>
</view>
// 抽屉部分
<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow" v-for="(item,index) in 20" :key="index">
<view class="content">
<text class="cuIcon-github text-grey"></text>
<text class="text-grey">{{index +1}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
modalName:null
};
},
methods: {
showModal(e) {
console.log(e)
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
// 这个函数没用到，我也不知道为什么源码作者写了
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
}
},
}
</script>
<style>
page {
background-image: var(--gradualBlue);
width: 100vw;
overflow: hidden;
}
.DrawerPage {
position: fixed;
width: 100vw;
height: 100vh;
left: 0vw;
background-color: #f1f1f1;
transition: all 0.4s;
}
.DrawerPage.show {
transform: scale(0.9, 0.9);
left: 85vw;
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
transform-origin: 0;
}
.DrawerWindow {
position: absolute;
width: 85vw;
height: 100vh;
left: 0;
top: 0;
transform: scale(0.9, 0.9) translateX(-100%);
opacity: 0;
pointer-events: none;
transition: all 0.4s;
padding: 100upx 0;
}
.DrawerWindow.show {
transform: scale(1, 1) translateX(0%);
opacity: 1;
pointer-events: all;
}
.DrawerClose {
position: absolute;
width: 40vw;
height: 100vh;
right: 0;
top: 0;
color: transparent;
padding-bottom: 30upx;
display: flex;
align-items: flex-end;
justify-content: center;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
letter-spacing: 5px;
font-size: 50upx;
opacity: 0;
pointer-events: none;
transition: all 0.4s;
}
.DrawerClose.show {
opacity: 1;
pointer-events: all;
width: 15vw;
color: #fff;
}
.DrawerPage .cu-bar.tabbar .action button.cuIcon {
width: 64upx;
height: 64upx;
line-height: 64upx;
margin: 0;
display: inline-block;
}
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
margin: 0;
}
.DrawerPage .nav {
flex: 1;
}
.DrawerPage .nav .cu-item.cur {
border-bottom: 0;
position: relative;
}
.DrawerPage .nav .cu-item.cur::after {
content: "";
width: 10upx;
height: 10upx;
background-color: currentColor;
position: absolute;
bottom: 10upx;
border-radius: 10upx;
left: 0;
right: 0;
margin: auto;
}
.DrawerPage .cu-bar.tabbar .action {
flex: initial;
}
</style>
```

234
docs/10.文档/40.插件扩展/40.垂直导航.md
View File

@@ -7,8 +7,236 @@ article: false
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/plugin/verticalnav`
1. 垂直导航主要有两个 `scroll-view` 标签实现
2. 分别是左侧的导航栏部分和右侧的内容部分，左侧导航栏部分使用类名 `VerticalBox`，右侧内容部分使用类名 `VerticalMain`
```vue
<template>
<view>
<view class="fixed">
<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
<block slot="backText">返回</block>
<block slot="content">垂直导航</block>
</cu-custom>
</view>
<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
duration="500">
<swiper-item v-for="(item,index) in 4" :key="index">
<image :src="'https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="VerticalBox">
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
:data-id="index">
Tab-{{item.name}}
</view>
</scroll-view>
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
<view class="cu-bar solid-bottom bg-white">
<view class="action">
<text class="cuIcon-title text-green"></text> Tab-{{item.name}}</view>
</view>
<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">
<text class="text-cut">
<text class="cuIcon-infofill text-red margin-right-xs"></text>
我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</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>
<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">
<text class="text-cut">瓦洛兰之盾-塔里克</text>
<view class="cu-tag round bg-orange sm">战士</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
</text>
</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"><text class="text-cut">莫甘娜</text></view>
<view class="text-gray text-sm flex"> <text class="text-cut">凯尔，你被自己的光芒变的盲目！</text></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><text class="text-cut">伊泽瑞尔</text>
<view class="cu-tag round bg-orange sm">断开连接...</view>
</view>
<view class="text-gray text-sm flex"> <text class="text-cut"> 等我回来一个打十个</text></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>
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</text></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>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
tabCur: 0,
mainCur: 0,
verticalNavTop: 0,
load: true
};
},
onLoad() {
uni.showLoading({
title: '加载中...',
mask: true
});
let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i);
list[i].id = i;
}
this.list = list;
this.listCur = list[0];
},
onReady() {
uni.hideLoading()
},
methods: {
TabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.mainCur = e.currentTarget.dataset.id;
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
},
// 希望有大佬给我讲解一下这个双向联动函数
VerticalMain(e) {
// #ifdef MP-ALIPAY
return false //支付宝小程序暂时不支持双向联动
// #endif
let that = this;
let tabHeight = 0;
if (this.load) {
for (let i = 0; i < this.list.length; i++) {
let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
view.fields({
size: true
}, data => {
this.list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
this.list[i].bottom = tabHeight;
}).exec();
}
this.load = false
}
let scrollTop = e.detail.scrollTop + 10;
for (let i = 0; i < this.list.length; i++) {
if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
this.verticalNavTop = (this.list[i].id - 1) * 50
this.tabCur = this.list[i].id
console.log(scrollTop)
return false
}
}
}
},
}
</script>
<style>
.fixed {
position: fixed;
z-index: 99;
}
.VerticalNav.nav {
width: 200upx;
white-space: initial;
}
.VerticalNav.nav .cu-item {
width: 100%;
text-align: center;
background-color: #fff;
margin: 0;
border: none;
height: 50px;
position: relative;
}
.VerticalNav.nav .cu-item.cur {
background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
content: "";
width: 8upx;
height: 30upx;
border-radius: 10upx 0 0 10upx;
position: absolute;
background-color: currentColor;
top: 0;
right: 0upx;
bottom: 0;
margin: auto;
}
.VerticalBox {
display: flex;
}
.VerticalMain {
background-color: #f1f1f1;
flex: 1;
}
</style>
```
:::