小程序：uni学习第三弹
小程序：uni学习第三弹
样式
- 单位：rpx，750为基础
- 不能使用 * 选择器
- page相当于body节点
- 局部样式会覆盖全局样式
- uni.scss | uni.less 中定义的变量可以在组件用使用
- 使用iconfont
- 路径需改为：[email protected]/static/对应文件夹
组件: 地址
-
1.view
- 视图容器
- 类似于传统html中的div，用于包裹各种元素内容
- 属性
- hover-class：string | 指定按下去的样式类。hover-class=“none” ，没有点击态效果
- hover-stop-propagation: boolean | 指定是否阻止本节点的祖先节点出现点击态
- hover-start-time: number | 按住后多久出现点击态，单位毫秒
- hover-stay-time: number | 手指松开后点击态保留时间，单位毫秒
-
2. text
-
文本组件，用于包裹文本内容 | 支持 \n 方式换行
-
组件内只支持嵌套 | 用 组件编译时会被转换为 -
除了文本节点以外的其他节点都无法长按选中
-
属性
- selectable: boolean | 文本是否可选
- decode： boolean | 是否解码
- 可以解析的有: | < | > | & | ' | |
- space： string | 显示连续空格
- ensp 中文字符空格一半大小
- emsp 中文字符空格大小
- nbsp 根据字体设置的空格大小
-
-
3. button
- 常用属性
-
size：按钮的大小
-
type：按钮的样式类型 | primary ，default，warn
-
plain：按钮是否镂空，背景色透明
-
disabled：是否禁用
-
loading：名称前是否带 loading 图标
-
hover-class：string | 指定按钮按下去的样式类。hover-class=“none” ，没有点击态效果
-
hover-stop-propagation: boolean | 指定是否阻止本节点的祖先节点出现点击态
-
hover-start-time: number | 按住后多久出现点击态，单位毫秒
-
hover-stay-time: number | 手指松开后点击态保留时间，单位毫秒
-
form-type：submit 提交表单 | reset 重置表单
-
open-type
- @error：当使用开放能力时，发生错误的回调 | open-type=“launchApp”
- @getuserinfo: 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
- @getphonenumber：获取用户手机号回调
- @opensetting：在打开授权设置页并关闭后回调
- @launchapp：打开 APP 成功的回调
-
- 常用属性
-
4. image
- 常用属性
-
src: string | 图片资源地址
-
mode: string | 图片裁剪、缩放的模式
-
缩放
- scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
- aspectFit： 保持纵横比缩放图片，使图片的长边能完全显示出来
- aspectFill： 保持纵横比缩放图片，只保证图片的短边能完全显示出来
- widthFix： 宽度不变，高度自动变化，保持原图宽高比不变
- heightFix： 高度不变，宽度自动变化，保持原图宽高比不变
- scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
-
裁剪
- top | bottom | left | right
- center
- top left: 显示图片的左上边区域
- top right: 显示图片的右上边区域
- bottom left: 显示图片的左下边区域
- bottom right: 显示图片的右下边区域
-
-
lazy-load: 图片懒加载。只针对page与scroll-view下的image有效
-
fade-show: 图片显示动画效果
-
@error
- 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}
-
@load
- 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}
-
- 常用属性