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-17 23:53:47 +08:00
parent a2653e6d5a
commit 0533aa0ebf
73 changed files with 1916 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/10.文档/10.快速开始/10.介绍.md
View File

@@ -19,6 +19,10 @@ Color UI 我想大家都知晓吧，我就不过多阐述了，是 **文晓港**
[ColorUI 在线展示](https://miren123.gitee.io/colorui-h5/#/) 因为右侧的h5是用iframe来嵌入的，因此字体和极小一部分的样式会有出入，文档里只做展示，比较完整的样式，点这里查看。
**微信扫码预览h5**
<img src="https://miren123.gitee.io/colorui-document/img/colorui-h5-code.png" style="zoom:25%;" />
## 文档说明
文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。

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

@@ -90,4 +90,14 @@ nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的
<text class="cuIcon-clothesfill"></text> 皮肤
</view>
</scroll-view>
```
```
## 导航栏相关class
|class| 说明| 可选值|
|--| --| --|
|nav |导航栏必选值| ——|
|cu-item |导航栏子元素 |——|
|flex| flex布局| ——|
|flex-sub |flex:1，平分| ——|
|text-center| 居中| ——|

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

@@ -331,4 +331,22 @@ SwitchSex(e) {
}
}
</script>
```
```
## 列表相关class
|class类名| 说明| 可选值|
|-- | --| --|
|cu-list |列表必选值 |——|
|cu-item| 列表子元素| ——|
|no-border |无边框 |——|
|menu| 菜单列表| ——|
|sm-border |短边框 |——|
|card-menu| 卡片样式的菜单列表 |——|
|arrow |右箭头 |——|
|menu-avatar| 消息列表（带头像）| ——|
|cu-avatar |头像 |——|
|content| 内容| ——|
|grayscale| 灰度（background-color: #f5f5f5）| ——|
|cur| background-color: #fcf7e9 ||
|move-cur| 左移（transform: translateX(-260upx)）||

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

@@ -5,10 +5,513 @@ permalink: /pages/component/form
article: false
---
## 操作条
<!-- form表单是用form标签包裹，每一个子元素添加类名cu-form-group，行内自定义，title类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度 -->
::: details 点此查看页面源代码
页面位置：`/pages/component/form`
```vue
## input输入框
1. `form` 表单最外层是用 `form` 标签包裹
2. 每一个子元素添加类名 `cu-form-group`，行内可以自定义，`input` 标签就是输入框
3. `title` 类名用于设置每行的文字说明，如果想统一宽度，像示例一样，需要自定义宽度
4. **行内没有 `input` 标签的话，`title` 后面的元素定位在行内右侧，有 `input` 标签的话，标签后的元素也是在行内右侧**
```html
<form>
<view class="cu-form-group margin-top">
<view class="title">邮件</view>
<input placeholder="两字短标题" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">输入框</view>
<input placeholder="三字标题" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="统一标题的宽度" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="输入框带个图标" name="input"></input>
<text class='cuIcon-locationfill text-orange'></text>
</view>
<view class="cu-form-group">
<view class="title">验证码</view>
<input placeholder="输入框带个按钮" name="input"></input>
<button class='cu-btn bg-green shadow'>验证码</button>
</view>
<view class="cu-form-group">
<view class="title">手机号码</view>
<input placeholder="输入框带标签" name="input"></input>
<view class="cu-capsule radius">
<view class='cu-tag bg-blue '>+86</view>
<view class="cu-tag line-blue">中国大陆</view>
</view>
</view>
</form>
<style>
.cu-form-group .title {
min-width: calc(4em + 15px);
}
</style>
```
:::
## picker选择器
1. 对于表单中从底部谈起的选择器，写法与上述简单的input相同，而选择器picker的使用，建议查看官方代码
2. 后期会封装一个组件给大家用（暂无）
```html
<form>
<view class="cu-form-group margin-top">
<view class="title">普通选择</view>
<picker @change="PickerChange" :value="index" :range="picker">
<view class="picker">
{{index>-1?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
</view>
</picker>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">多列选择</view>
<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<!-- #endif -->
<view class="cu-form-group">
<view class="title">时间选择</view>
<picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
<view class="picker">
{{time}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">日期选择</view>
<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
<view class="picker">
{{date}}
</view>
</picker>
</view>
<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">地址选择</view>
<picker mode="region" @change="RegionChange" :value="region">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
<!-- #endif -->
</form>
<!-- data -->
return {
index: -1,
picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
<!-- 多列选择的对象形式 -->
objectMultiArray: [
[{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
],
[{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
],
[{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
time: '12:01',
date: '2018-12-25',
region: ['广东省', '广州市', '海珠区'],
};
<!-- data -->
PickerChange(e) {
this.index = e.detail.value
},
MultiChange(e) {
this.multiIndex = e.detail.value
},
MultiColumnChange(e) {
let data = {
multiArray: this.multiArray,
multiIndex: this.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
break;
}
this.multiArray = data.multiArray;
this.multiIndex = data.multiIndex;
},
TimeChange(e) {
this.time = e.detail.value
},
DateChange(e) {
this.date = e.detail.value
},
RegionChange(e) {
this.region = e.detail.value
},
<!-- css -->
<style>
.cu-form-group .title {
min-width: calc(4em + 15px);
}
</style>
```
## switch开关
1. 对于开关的样式，参考 `switch` 官方文档
2. 在微信小程序上，switch的color属性不生效，想要更改开关颜色，可以用颜色类名，直接写颜色就可以
```html
<form>
<view class="cu-form-group margin-top">
<view class="title">开关选择</view>
<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<!-- #ifdef MP-ALIPAY -->
<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false" color="#e54d42"></switch>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<switch class='red' @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
<!-- #endif -->
</view>
<view class="cu-form-group">
<view class="title">定义图标</view>
<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">方形开关</view>
<switch class='orange radius' @change="SwitchD" :class="switchD?'checked':''" :checked="switchD?true:false"></switch>
</view>
<!-- #endif -->
</form>
<!-- data -->
return {
switchA: false,
switchB: true,
switchC: false,
switchD: false,
};
<!-- js -->
SwitchA(e) {
this.switchA = e.detail.value
},
SwitchB(e) {
this.switchB = e.detail.value
},
SwitchC(e) {
this.switchC = e.detail.value
},
SwitchD(e) {
this.switchD = e.detail.value
},
```
## radio单选框
1. 主要还是 `radio` 官方文档为主
2. 更改颜色同上，使用提供的颜色类名即可
3. 其默认样式是圆形全色中间有个√，可以通过类名radio更改形状为镂空中间一个点
```html
<form>
<radio-group class="block" @change="RadioChange">
<view class="cu-form-group margin-top">
<view class="title">单选操作(radio)</view>
<radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">定义样式</view>
<radio class='radio' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<view>
<radio class='blue radio' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="C"></radio>
<radio class='red margin-left-sm' :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D"></radio>
</view>
</view>
<!-- #endif -->
</radio-group>
</form>
<!-- data -->
return {
radio: 'A',
};
<!-- js -->
RadioChange(e) {
this.radio = e.detail.value
},
```
## checkbox复选框
1. 官方示例
2. 更改颜色同上，使用提供的颜色类名即可
3. 其默认样式是方形，可以通过类名 `round` 更改形状为圆形
```html
<form>
<checkbox-group class="block" @change="CheckboxChange">
<view class="cu-form-group margin-top">
<view class="title">复选选操作(checkbox)</view>
<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="cu-form-group">
<view class="title">定义形状</view>
<checkbox class='round' :class="checkbox[1].checked?'checked':''" :checked="checkbox[1].checked?true:false" value="B"></checkbox>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<checkbox class='round blue' :class="checkbox[2].checked?'checked':''" :checked="checkbox[2].checked?true:false"
value="C"></checkbox>
</view>
<!-- #endif -->
</checkbox-group>
</form>
<!-- data -->
return {
checkbox: [{
value: 'A',
checked: true
}, {
value: 'B',
checked: true
}, {
value: 'C',
checked: false
}],
};
<!-- js -->
CheckboxChange(e) {
var items = this.checkbox,
values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value == values[j]) {
items[i].checked = true;
break
}
}
}
},
```
## 图片上传
1. 官方示例
2. `uniapp` [图片相关操作的API](https://uniapp.dcloud.net.cn/api/media/image.html#)
```vue
<form>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
</form>
<script>
export default {
data() {
return {
index: -1,
imgList: []
};
},
methods: {
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '召唤师',
content: '确定要删除这段回忆吗？',
cancelText: '再看看',
confirmText: '再见',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
}
}
}
</script>
```
## 头像
这个样式可以用于用户修改个人资料中，修改头像
```html
<form>
<view class="cu-form-group margin-top">
<view class="title">头像</view>
<view class="cu-avatar radius bg-gray"></view>
</view>
</form>
```
## 多行文本
```html
<form>
<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
<view class="cu-form-group margin-top">
<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
</view>
<view class="cu-form-group align-start">
<view class="title">文本框</view>
<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="多行文本输入框"></textarea>
</view>
</form>
<!-- data -->
return{
modalName: null,
}
<!-- js -->
textareaAInput(e) {
this.textareaAValue = e.detail.value
},
textareaBInput(e) {
this.textareaBValue = e.detail.value
}
```

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

@@ -5,10 +5,114 @@ permalink: /pages/component/timeline
article: false
---
## 操作条
## 默认时间轴
::: details 点此查看页面源代码
页面位置：`/pages/component/timeline`
```vue
1. 时间轴默认结构如下代码，对应右侧预览图第一个6-17时间轴的样式
2. 由 `cu-timeline` 包裹 `cu-time` 和 `cu-item`，在 `item` 内编写内容，由 `content` 包裹
```html
<view class="cu-timeline">
<view class="cu-time">06-17</view>
<view class="cu-item">
<view class="content">
<text>01:30</text> 【喵星】 MX-12138 已揽收，准备发往银河系
</view>
</view>
</view>
```
:::
## 彩色时间轴
1. 与默认的基本格式相同，只是自定义了内容框颜色和图标
2. 对应右侧彩色时间轴
```html
<view class="cu-timeline">
<view class="cu-time">昨天</view>
<view class="cu-item cur cuIcon-noticefill">
<view class="content bg-green shadow-blur">
<text>22:22</text> 【广州市】快件已到达地球
</view>
</view>
<view class="cu-item text-red cuIcon-attentionforbidfill">
<view class="content bg-red shadow-blur">
这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
</view>
</view>
<view class="cu-item text-grey cuIcon-evaluate_fill">
<view class="content bg-grey shadow-blur">
这是第一次，我家的铲屎官走了这么久。
</view>
</view>
<view class="cu-item text-blue">
<view class="bg-blue content">
<text>20:00</text> 【月球】快件已到达月球，准备发往地球
</view>
<view class="bg-cyan content">
<text>10:00</text> 【银河系】快件已到达银河系，准备发往月球
</view>
</view>
</view>
```
## 自定义时间轴
1. 上一个是简单的修改了颜色图标，这一个则是稍微复杂一点，结合之前的标签、列表等，丰富了内容
```html
<view class="cu-timeline">
<view class="cu-time">06-17</view>
<view class="cu-item">
<view class="content">
<view class="cu-capsule radius">
<view class="cu-tag bg-cyan">上午</view>
<view class="cu-tag line-cyan">10:00</view>
</view>
<view class="margin-top">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
</view>
</view>
<view class="cu-item text-blue">
<view class="bg-blue shadow-blur content">
<view class="cu-list menu-avatar radius">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
<view class="content">
<view class="text-grey">文晓港</view>
<view class="text-gray text-sm">
<text class="cuIcon-infofill text-red"></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/web201310/skin/big10006.jpg);">
<view class="cu-tag badge">99+</view>
</view>
<view class="content">
<view class="text-grey">文晓港
<view class="cu-tag round orange sm">SVIP</view>
</view>
<view class="text-gray text-sm">
<text class="cuIcon-redpacket_fill text-red"></text> 收到红包</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<text class="cuIcon-notice_forbid_fill text-gray"></text>
</view>
</view>
</view>
</view>
</view>
</view>
```
## 时间轴相关class
|class| 说明| 可选值|
|--| --| --|
|cu-timeline |时间轴必选值| ——|
|cu-time| 时间| ——|
|cu-item| 子元素 |——|
|content| 内容信息| ——|

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

@@ -5,10 +5,150 @@ permalink: /pages/component/chat
article: false
---
## 操作条
`cu-chat` 聊天必选值
::: details 点此查看页面源代码
页面位置：`/pages/component/chat`
```vue
## 基本样式
1. 聊天的外部大框架是 `cu-chat`
2. `cu-item` 包裹某人的聊天信息
3. `self` 表示右侧自己的聊天样式
4. `main` 包含聊天内容
5. `date` 表示消息时间
6. `cu-info` 表示提示词
```html
<view class="cu-chat">
<view class="cu-item self">
<view class="main">
<view class="content bg-green shadow">
<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">2018年3月23日 13:23</view>
</view>
<view class="cu-info round">对方撤回一条消息!</view>
<view class="cu-item">
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
<view class="main">
<view class="content shadow">
<text>喵喵喵！喵喵喵！</text>
</view>
</view>
<view class="date "> 13:23</view>
</view>
<view class="cu-info">
<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
</view>
<view class="cu-info">
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
<text class="text-blue">发送好友验证</text>
</view>
</view>
```
:::
## 其他聊天内容
1. 聊天内容除了语句，还有图片，语音消息，地理位置消息等
2. `main` 包含的聊天内容不止是消息框里的，还有消息框旁边的提示图标文字等
3. 消息框里的内容由 `content` 包裹
```html
<view class="cu-chat">
<!-- 图片 -->
<view class="cu-item self">
<view class="main">
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date"> 13:23</view>
</view>
<!-- 语音 -->
<view class="cu-item self">
<view class="main">
<view class="action text-bold text-grey">
3"
</view>
<view class="content shadow">
<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">13:23</view>
</view>
<!-- 消息带图标 -->
<view class="cu-item self">
<view class="main">
<view class="action">
<text class="cuIcon-locationfill text-orange text-xxl"></text>
</view>
<view class="content shadow">
喵星球，喵喵市
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
<view class="date">13:23</view>
</view>
<!-- 翻译错误 -->
<view class="cu-item">
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
<view class="main">
<view class="content shadow">
@#$^&**
</view>
<view class="action text-grey">
<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
</view>
</view>
<view class="date">13:23</view>
</view>
</view>
```
## 发送框
参考操作条
```html
<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
<view class="action">
<text class="cuIcon-sound text-grey"></text>
</view>
<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
@focus="InputFocus" @blur="InputBlur"></input>
<view class="action">
<text class="cuIcon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow">发送</button>
</view>
<script>
export default {
data() {
return {
InputBottom: 0
};
},
methods: {
InputFocus(e) {
this.InputBottom = e.detail.height
},
InputBlur(e) {
this.InputBottom = 0
}
}
}
</script>
```
## 聊天相关class
|class |说明| 可选值|
|-- |--| --|
|cu-chat| 聊天必选值| ——|
|cu-item| 子元素| ——|
|self |右侧本人的聊天样式| ——|
|main |聊天内容| ——|
|content| 消息框内容| ——|
|date |消息日期 |——|
|cu-info| 提示词 |——|

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

@@ -5,10 +5,194 @@ permalink: /pages/component/swiper
article: false
---
## 操作条
## 全屏限高轮播
1. 添加类名 `screen-swiper`，宽度为全屏，高度自定义
2. 请直接参考 `swiper` [官方文档](https://uniapp.dcloud.net.cn/component/swiper.html#)，可以通过类名 `square-dot` 和 `round-dot` 定义小圆点样式
::: details 点此查看页面源代码
页面位置：`/pages/component/swiper`
```vue
<template>
<view>
<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
:autoplay="true" interval="5000" duration="500">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
swiperList: [{
id: 0,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
}, {
id: 2,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
}, {
id: 3,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
}],
dotStyle: true
};
}
}
</script>
```
:::
## 卡片式轮播
1. 在 `swiper` 标签上添加类名 `card-swiper`
2. 在 `swiper-item` 标签内的子元素上添加类名 `swiper-item`，
3. 示例中 `cardSwiper` 函数的主要作用是切换类名 `cur`，`cur` 的作用是实现轮播图片中间大，两边小的效果，就是 `transform的scale()`
```vue
<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
:autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
indicator-active-color="#0081ff">
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
<view class="swiper-item">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</view>
</swiper-item>
</swiper>
<!-- js -->
cardSwiper(e) {
this.cardCur = e.detail.current
},
```
## 堆叠式轮播
1. 堆叠轮播是原生写的，注意类名 `tower-swiper`、`tower-item` 以及 `swiper-item` 的配合使用，这主要是通过层级的高低来显示图片的，使用时需要配合 `js` 和 `css`。
2. 注：这种轮播图初始化展示第一章会便宜一点，需要触动一下才会展示正常的效果，可以通过在 `onload()` 函数中给变量 `direction` 赋值解决
```vue
<template>
<view>
<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
<view class="swiper-item">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiperList: [{
id: 0,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
}, {
id: 2,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
}, {
id: 3,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
}, {
id: 4,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
}, {
id: 5,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
}, {
id: 6,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
}],
towerStart: 0,
direction: ''
};
},
onLoad() {
this.TowerSwiper('swiperList');
this.direction = 'left';
// 初始化towerSwiper 传已有的数组名即可
},
methods: {
// 初始化towerSwiper
TowerSwiper(name) {
let list = this[name];
console.log(list)
for (let i = 0; i < list.length; i++) {
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
list[i].mLeft = i - parseInt(list.length / 2)
}
this.swiperList = list
},
// towerSwiper触摸开始
TowerStart(e) {
console.log(e)
this.towerStart = e.touches[0].pageX
},
// towerSwiper计算方向
TowerMove(e) {
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
},
// towerSwiper计算滚动
TowerEnd(e) {
let direction = this.direction;
let list = this.swiperList;
if (direction == 'right') {
let mLeft = list[0].mLeft;
console.log(list[0])
let zIndex = list[0].zIndex;
for (let i = 1; i < this.swiperList.length; i++) {
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
}
this.swiperList[list.length - 1].mLeft = mLeft;
this.swiperList[list.length - 1].zIndex = zIndex;
} else {
let mLeft = list[list.length - 1].mLeft;
let zIndex = list[list.length - 1].zIndex;
for (let i = this.swiperList.length - 1; i > 0; i--) {
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
}
this.swiperList[0].mLeft = mLeft;
this.swiperList[0].zIndex = zIndex;
}
this.direction = ""
this.swiperList = this.swiperList
},
}
}
</script>
<style>
.tower-swiper .tower-item {
transform: scale(calc(0.5 + var(--index) / 10));
margin-left: calc(var(--left) * 100upx - 150upx);
z-index: var(--index);
}
</style>
```