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 组件相当于行内标签 在同一行显示
- 除了文本节点以外的其他节点都无法长按选中
代码案例
<template>
<view>
<view>
<!--selectable表示是否选中 true 为选中 false 表示不选中-->
<text selectable>我是个文本</text>
</view>
<view>
<!--设置space属性为emsp 表示中文字符空格一半大小-->
<text space="emsp">我是个 文本</text>
</view>
<view>
<!--设置space属性为ensp 表示中文字符空格大小-->
<text space="ensp">我是个 文本</text>
</view>
<view class="">
<!--设置space属性为nbsp表示根据字体设置的空格大小-->
<text space="nbsp">我是个 文本</text>
</view>
</view>
</template>
<script>
</script>
<style>
</style>
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 | 否 | 手指松开后点击态保留时间 单位毫秒 |
代码案例
<template>
<view>
<view class="box2" hover-class="box2-hover">
<!--
hover-stop-propagation 阻止事件冒泡
hover-start-time 表示多少秒执行效果
hover-stay-time 表示多少秒失去效果
-->
<view class="box" hover-stop-propagation
:hover-start-time="2000"
:hover-stay-time="2000"
hover-class="box-hover">
我是一个box盒子
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.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;
}
</style>
button按钮组件的用法
按钮组件详细说明 请参考文档
组件的属性:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | String | default | 按钮的大小 |
| type | String | default | 按钮的样式类型 |
| plain | Boolean | false | 按钮是否镂空 背景色透明 |
| disabled | Boolean | false | 是否按钮 |
| loading | Boolean | false | 名称是否带loading 图标 |
button组件默认独占一行 设置size为mini时可以在一行显示多个
案列代码
<template>
<view class="uni-padding-wrap uni-common-mt">
<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button>
<button type="default">页面次要操作 Normal</button>
<button type="default" disabled="true">页面次要操作 Disabled</button>
<button type="warn">警告类操作 Normal</button>
<button type="warn" disabled="true">警告类操作 Disabled</button>
<view class="button-sp-area">
<button type="primary" plain="true">按钮</button>
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
<button type="default" plain="true">按钮</button>
<button type="default" disabled="true" plain="true">按钮</button>
<button class="mini-btn" type="primary" size="mini">按钮</button>
<button class="mini-btn" type="default" size="mini">按钮</button>
<button class="mini-btn" type="warn" size="mini">按钮</button>
</view>
</view>
</template>
Image组件的基本使用
详细属性以及使用见官方文档
属性说明:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | 图片资源地址 | |
| mode | String | ‘scaleToFill’ | 图片裁剪、缩放的模式 |
| lazy-load | Boolean | true | 图片懒加载 只针对page与scroll-view下的image有效 |
| fade-show | Boolean | true | 图片显示动画效果 |
Tips
<image>组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度src仅支持相对路径、绝对路径，支持 base64 码；- 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置
image{will-change: transform},可优化此问题。 - 自定义组件里面使用
<image>时，若src使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。 - webp格式的图片在Android上是内置支持的。iOS上不同平台不一样，具体如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。
- svg 格式的图片在不同的平台支持情况不同。具体为：app-nvue 不支持 svg 格式的图片，小程序上只支持网络地址
代码案例
<template>
<view class="page">
<view class="image-list">
<view class="image-item" v-for="(item,index) in array" :key="index">
<view class="image-content">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
@error="imageError"></image>
</view>
<view class="image-title">{{item.text}}</view>
</view>
</view>
</view>
</template>
<script>
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)
}
}
}
</script>
<style>
</style>
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变量所写入的颜色
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
