组件的基本使用

最新推荐文章于 2024-10-09 20:10:15 发布

SunACong

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量197

点赞数

分类专栏： uni-app 文章标签：前端微信小程序 uni-app

本文链接：https://blog.csdn.net/qq_44808710/article/details/121362876

版权

uni-app 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了小程序中的一些基础组件，包括text文本组件、view视图容器组件、button表单组件和image媒体组件的使用方法和示例。text组件用于显示文本，view组件作为布局容器，button组件支持多种样式和交互，image组件则用于展示图片，支持多种模式调整。

摘要由CSDN通过智能技术生成

基础组件的列表

text文本基础组件

text 组件相当于行内标签、在同一行显示
除了文本节点以外的其他节点都无法长按选中

<text  space="nbsp" style="font-size: 100px;" selectable >唱歌    跳舞打游戏</text>
<text>&amp;</text> //可以解析为&符号

view视图容器组件

View 视图容器，类似于 HTML 中的 div
代码示例

<view class="box2" hover-class="box2-active">
			<view class="box" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box-active" hover-stop-propagation>我是一个大盒子</view> 
</view>

style里面定义点击的样式

.box-active{
		width: 100px;
		height: 100px;
		background: #DD524D;
	}

button表单组件

button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

<button>按钮</button>
<button size="mini">按钮</button>
<button type="warn" plain>按钮</button>
<button type="warn" disabled="">按钮</button>
<button loading="">按钮</button>

image媒体组件

<image> 组件默认宽度 300px、高度 225px；
src 仅支持相对路径、绝对路径，支持 base64 码；
页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

<image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFit"></image>
<image src="http://destiny001.gitee.io/image/cxk.gif"></image>
<image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFill"></image>