uni-app 必会小知识
- 作者 : zfajax舫
- |
- 发布时间 : 6年前
- |
- 评论数 : 0
- 查看数 : 48
1. view 和 text 组件介绍
<!--
* hover-class 代表触碰后激活的样式
* hover-start-time 代表触碰后延迟多少秒
* hover-stay-time 代表动画持续时长
* -->
<view class="zf" hover-class="zf-hover bounceIn" hover-start-time="2000" hover-stay-time="5000"></view>
<!--
* text 最主要的功能是支持 \n 换行
* selectable 是否可选 默认false
* -->
<text selectable="true" > afweawe \n fawefaew fawefawe \n</text>
2. 项目可用选择器介绍
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有 class=”intro” 的组件 |
| #id | #firstname | 选择拥有 id=”firstname” 的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| ::after | view::after | 在 view 组件后边插入内容，仅微信小程序和5+App生效 |
| ::before | view::before | 在 view 组件前边插入内容，仅微信小程序和5+App生效 |
3. flex 布局
flex布局给我的感觉通过改变父元素的样式，样式改变子元素的显示方式，排序方式，上下位置，如果有特殊情况，可以使用特定的子元素专属样式，进行特殊调整
display:flex; //开启flex布局
flex-wrap:wrap; //超出部分换行 父
flex-wrap:wrap-reverse; //超出部分倒叙换行 父
justify-content:flex-start; //左侧对齐 默认 父
justify-content:flex-end; //右侧对齐 默认 父
justify-content:center; //中元素居中 父
justify-content:space-between; //元素两端对齐 父
align-items:center; //垂直居中 父
align-items:stretch; //上下填充满，记得不要给里面的元素设置高度 父
align-items:flex-end; //垂直在下 父
flex-direction:row; //从左到右排列 默认 父
flex-direction:column; //从上到下排列 父
flex-shrink:0; //0代表不被压缩，1代表被压缩 子
flex:1; //平局分配每个都占用1份 子
align-self:flex-end; //自己在下方用的不多 子4.vue 2.0 语法
{{}} #使用双括号绑定数据
: #使用冒号给html属性绑定值 ，在uni-app中不支持upx
:class = "[ age>10?class1:'' , class2]" #使用例子 class1 class2 是变量存放类名
:class = "{'bor':isActive}" #isActive是变量 布尔值
v-if #vue语法 条件判断 元素直接没有 和 php 判断一样 这个需要写在<template>标签里
v-else #vue语法 条件判断
v-else-if #vue语法 条件判断
v-show #vue语法 条件判断是否 隐藏
@tap #和@click一样
v-for #vue循环语法 循环要写在 <block>标签里 uni-app 定义的
<li v-for = "(val,index) in list" :key="index"></li> #val代表value index代表key list代表要循环的值 :key 指定一下key要不然报错
5. 事件处理器
@tap # 等于click事件 @tap.stop="" 阻止冒泡事件
6. 监听属性
watch:{
name(){ #name代表要监听的属性，变量，监听什么变量就用什么变量取名
console.log(111);
}
},7. 计算属性
computed:{
computedName(){ #计算完成之后直接使用{{computedNmae}} 直接使用双花括号调用
return this.name+"计算后的值"
}
},
