uni-app 必会小知识
2019年6月12日1view 和 text 组件介绍
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- * 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布局给我的感觉通过改变父元素的样式,样式改变子元素的显示方式,排序方式,上下位置,如果有特殊情况,可以使用特定的子元素专属样式,进行特殊调整
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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 语法
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{{}} #使用双括号绑定数据 : #使用冒号给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.事件处理器
1 |
@tap # 等于click事件 @tap.stop="" 阻止冒泡事件 |
6.监听属性
1 2 3 4 5 |
watch:{ name(){ #name代表要监听的属性,变量,监听什么变量就用什么变量取名 console.log(111); } }, |
7.计算属性
1 2 3 4 5 |
computed:{ computedName(){ #计算完成之后直接使用{{computedNmae}} 直接使用双花括号调用 return this.name+"计算后的值" } }, |