目录
text文本组件的使用
view视图容器组件的用法
button按钮组件的用法
image组件的使用
uni-app中的样式
uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接称自己的应用
uni-app中的组件,就像 HTML
中的 div
、p
、span
text文本组件的使用
属性 | 类型 | 默认值 | 必填 | 说明 |
selectable | boolean | false | 否 | 文本是否可选 |
space | string | . | 否 | 显示连续空格,可选参数: |
decode | boolean | false | 否 | 是否解码 |
text
组件相当于行内标签、在同一行显示- 除了文本节点以外的其他节点都无法长按选中
<view>
<!-- 长按文本是否可选 -->
<text selectable='true'>hello word</text>
</view>
<view>
<!-- 显示连续空格的方式 -->
<view>
<text space='ensp'>hello word</text>
</view>
<view>
<text space='emsp'>hello word</text>
</view>
<view>
<text space='nbsp'>hello word</text>
</view>
</view>
<view>
<text>skyblue</text>
</view>
<view>
<!-- 是否解码 -->
<text decode='true'> < > & ' </text>
</view>
view视图容器组件的用法
View 视图容器, 类似于 HTML 中的 div
<view class="box2" hover-class="box2_active">
<view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
</view>
</view>
button按钮组件的用法
属性名 | 类型 | 默认值 | 说明 |
size | String | default | 按钮的大小 |
type | String | default | 按钮的样式类型 |
plain | Boolean | false | 按钮是否镂空,背景色透明 |
disabled | Boolean | false | 是否按钮 |
loading | Boolean | false | 名称是否带 loading t图标 |
button
组件默认独占一行,设置size
为mini
时可以在一行显示多个
<button size='mini' type='primary'>hello</button>
<button size='mini' type='default' disabled='true'>hello</button>
<button size='mini' type='warn' loading='true'>hello</button>
image组件的使用
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
src | String | | 图片资源地址 | |
mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 | |
<image>
组件默认宽度 300px、高度 225px;src
仅支持相对路径、绝对路径,支持 base64 码;- 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置
image{will-change: transform}
,可优化此问题。
uni-app中的样式
- rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大。
- 使用
@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;表示语句结束 - 支持基本常用的选择器class、id、element等
- 在
uni-app
中不能使用*
选择器。 page
相当于body
节点- 定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。
可以使用使用scss或者less (这需要在编辑器中安装插件)
<style lang='sass'>
view{
color:'#fff'
}
</style>
本篇文章讲解组件的基本使用,若有什么地方不明确或某些位置不太懂得请在评论中指出,后期我会继续出更多的基础教学谢谢各位支持 ,谢谢大家