uni-app学习笔记(二)
condition 启动配置
启动模式配置 仅开发期间生效 用于模拟直达页面的场景 如:小程序转发后 用户点击所打开的页面
属性说明:
| 属性 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| current | Number | 是 | 当前激活的模式 list节点的索引值 |
| list | Array | 是 | 启动模式列表 |
list说明:
| 属性 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| name | String | 是 | 启动模式名称 |
| path | String | 是 | 启动页面路径 |
| query | String | 否 | 启动参数 可在这里 获取 |
uni-app中的组件基本使用
uni-app 提供了丰富的基础组件给开发者，开发者可以像搭积木一样 组合各种组件拼接称自己的应用 uni-app中的组件 就像HTML中的div、p、span等标签的作用一样 用于搭建页面的基础结构
text文本组件的用法
属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| selectable | boolean | false | 否 | 文本是否可选 |
| space | String | . | 否 | 显示连续空格 可选参数: ensp、emsp、nbsp |
| decode | boolean | false | 否 | 是否解码 |
- text 组件相当于行内标签 在同一行显示
- 除了文本节点以外的其他节点都无法长按选中
代码案例
我是个文本我是个 文本我是个 文本我是个 文本 view视图组件的用法
View 视图容器 类似于HTML中的div
组件的属性:
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| hover-class | String | none | 否 | 指定按下去的样式类 当hover-class="none"时 没有点击态效果 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态单位毫秒 |
| hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间 单位毫秒 |
代码案例
我是一个box盒子.box{background-color: green;width: 100px;height: 100px;}.box2{background-color: blue;width: 200px;height: 200px;}.box2-hover{background-color: pink;}.box-hover{background-color: red;}button按钮组件的用法
按钮组件详细说明 请参考文档
组件的属性:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | String | default | 按钮的大小 |
| type | String | default | 按钮的样式类型 |
| plain | Boolean | false | 按钮是否镂空 背景色透明 |
| disabled | Boolean | false | 是否按钮 |
| loading | Boolean | false | 名称是否带loading 图标 |
button组件默认独占一行 设置size为mini时可以在一行显示多个
案列代码
Image组件的基本使用
详细属性以及使用见官方文档
属性说明:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | 图片资源地址 | |
| mode | String | ‘scaleToFill’ | 图片裁剪、缩放的模式 |
| lazy-load | Boolean | true | 图片懒加载 只针对page与scroll-view下的image有效 |
| fade-show | Boolean | true | 图片显示动画效果 |
Tips
组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度src仅支持相对路径、绝对路径，支持 base64 码；- 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置
image{will-change: transform},可优化此问题。 - 自定义组件里面使用
时，若src使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。 - webp格式的图片在Android上是内置支持的。iOS上不同平台不一样，具体如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。
- svg 格式的图片在不同的平台支持情况不同。具体为：app-nvue 不支持 svg 格式的图片，小程序上只支持网络地址
代码案例
{{item.text}} export default { data() { return { array: [{ mode: 'scaleToFill', text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应' }, { mode: 'aspectFit', text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来' }, { mode: 'aspectFill', text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来' }, { mode: 'top', text: 'top：不缩放图片，只显示图片的顶部区域' }, { mode: 'bottom', text: 'bottom：不缩放图片，只显示图片的底部区域' }, { mode: 'center', text: 'center：不缩放图片，只显示图片的中间区域' }, { mode: 'left', text: 'left：不缩放图片，只显示图片的左边区域' }, { mode: 'right', text: 'right：不缩放图片，只显示图片的右边边区域' }, { mode: 'top left', text: 'top left：不缩放图片，只显示图片的左上边区域' }, { mode: 'top right', text: 'top right：不缩放图片，只显示图片的右上边区域' }, { mode: 'bottom left', text: 'bottom left：不缩放图片，只显示图片的左下边区域' }, { mode: 'bottom right', text: 'bottom right：不缩放图片，只显示图片的右下边区域' }], src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg' } }, methods: { imageError: function(e) { console.error('image发生error事件，携带值为' + e.detail.errMsg) } }}uniapp中样式的学习及如何使用scss和字体图标
-
rpx即响应式px 一种根据屏幕宽度自适应的动态单位 以750宽的屏幕为基准,750rpx恰好为屏幕宽度 屏幕变宽 rpx实际显示效果会等比放大
-
使用
@import语句可以导入外联样式表@import后跟需要导入的外联样式的相对路径 用;表示语句结束 -
支持基本常用的选择器class、id、element等
-
在
uni-app中不能使用*选择器 -
page相当于body节点 -
定义在App.vue中的样式为全局样式 作用于每一个页面 在pages目录下的vue文件中定义的样式为局部样式 只作用在对应的页面 并会覆盖App.vue 中相同的选择器
-
uni-app支持使用字体图标 使用方式与普通web项目相同 需要注意以下几点-
字体文件小于40kb
uni-app会自动将其转化base64格式； -
字体文件大于等于40kb 需开发者自己转换 否则使用将不生效
-
字体文件的引用路径推荐使用~@开头的绝对路径
@font-face{ font-family:test1-icon; src:url('字体图标的路径')}
-
-
如何使用scss或者less
字体图标使用操作如下
- 现将下载好的字体图标样式拷贝到项目中
- 在App.vue的style标签中 导入字体的css 样式 因为App.vue中style是全局样式
- 修改字体样式的路径 统一改成全局路径 不然有可能报错
- 页面中引入字体样式即可
- 运行 看看效果如何
uniapp中如何使用scss
- 使用的是HBuilderX的话 没有安装scss插件 可以先去安装scss插件 选择工具=>插件安装=>找到scss进行安装
- 接着操作 进入页面 将style标签添加一个属性 lang=scss
- 然后就可以使用scss 测试一下 引入一下全局的scss变量
- 然后可以看到view的边框变成了scss变量所写入的颜色
