以下内容均为学习笔记抄录,为复习方便,侵权请联系删除
text文本组件的用法
001 - text 组件的属性
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
selectable | boolean | false | 否 | 文本是否可选 |
space | string | . | 否 | 显示连续空格,可选参数:ensp 、emsp 、nbsp |
decode | boolean | false | 否 | 是否解码 |
text
组件相当于行内标签、在同一行显示- 除了文本节点以外的其他节点都无法长按选中
002 - 代码案例
<view>
<!-- 长按文本是否可选 -->
<text selectable='true'>来了老弟</text>
</view>
<view>
<!-- 显示连续空格的方式 -->
<view>
<text space='ensp'>来了 老弟</text>
</view>
<view>
<text space='emsp'>来了 老弟</text>
</view>
<view>
<text space='nbsp'>来了 老弟</text>
</view>
</view>
<view>
<text>skyblue</text>
</view>
<view>
<!-- 是否解码 -->
<text decode='true'> < > & '    </text>
</view>
view视图容器组件的用法
View 视图容器, 类似于 HTML 中的 div
001 - 组件的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TWwiC5HR-1638443325254)(./images/2view.png)]
002 - 代码案例
<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按钮组件的用法
001 - 组件的属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
size | String | default | 按钮的大小 |
type | String | default | 按钮的样式类型 |
plain | Boolean | false | 按钮是否镂空,背景色透明 |
disabled | Boolean | false | 是否按钮 |
loading | Boolean | false | 名称是否带 loading t图标 |
button
组件默认独占一行,设置size
为mini
时可以在一行显示多个
002 - 案例代码
<button>按钮</button>
<button size="mini">按钮</button>
<button type="primary">按钮</button>
<button type="default">按钮</button>
<button type="primary" plain></button>
<button type="primary"disabled></button>
<button loading>加载按钮</button>
image组件的使用
image
图片。
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
src | String | 图片资源地址 | ||
mode | String | ‘scaleToFill’ | 图片裁剪、缩放的模式 |
Tips
<image>
组件默认宽度 300px、高度 225px;src
仅支持相对路径、绝对路径,支持 base64 码;- 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置
image{will-change: transform}
,可优化此问题。
002 - 案例代码
<image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFit"></image>