uniApp:基本组件

这篇具有很好参考价值的文章主要介绍了uniApp:基本组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官方文档组件:https://uniapp.dcloud.io/component/README


text 文本组件

用于包裹文本内容。

注意事项:

  • <text> 组件内只支持嵌套 <text>,不支持其它组件或自定义组件。

  • app-nvue 下,只有 <text> 才能包裹文本内容。

  • decode 可以解析的有 &nbsp;&lt;&gt&amp;&apos;&ensp; &emsp;

  • 除了文本节点以外的其他节点都无法长按选中。

  • 如果使用 <span> 组件编译时会被转换为 <text>
    | text 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
    | — | — | — | — | — |
    | selectable | Boolean | false | 文本是否可选 | App、H5、快手小程序 |
    | user-select | Boolean | false | 文本是否可选 | 微信小程序 |
    | space | String | | 显示连续空格 | App、H5、微信小程序 |
    | decode | Boolean | false | 是否解码 | App、H5、微信小程序 |

  • space 值说明
    | 值 | 说明 |
    | — | — |
    | ensp | 中文字符空格一半大小 |
    | emsp | 中文字符空格大小 |
    | nbsp | 根据字体设置的空格大小 |

<template>
	<view>
		<text selectable>可选中的文本</text>
	</view>
</template>

视图容器

view 视图容器组件

视图容器组件,类似于传统 html 中的 div,用于包裹各种元素内容。

  • 如果使用 <div> ,编译时会被转为 <view>
view 属性名 类型 默认值 说明
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="box" hover-class="box1" :hover-start-time="2000">
			<view class="con" hover-class="con1" hover-stop-propagation>小盒子</view>
		</view>
	</view>
</template>

<style>
.box {
	width: 200px;
	height: 200px;
	background-color: #F00;
},
.box1, {
	background-color: #00F;
}

.con {
	width: 100px;
	height: 100px;
	background-color: #0ff;
},
.con1 {
	background-color: #0f0;
}
</style>

表单组件

button 按钮组件

注意事项:

  • button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  • open-type="launchApp"时需要调起的APP接入微信OpenSDK 详见
属性名 类型 默认值 说明
size String default 按钮的大小
type String default 按钮的样式类型
plain Boolean false 按钮是否镂空,背景色透明
disabled Boolean false 是否禁用
loading Boolean false 名称前是否带 loading 图标
  • size 有效值
    | 值 | 说明 |
    | — | — |
    | default | 默认大小 |
    | mini | 小尺寸 |

  • type 有效值
    | 值 | 说明 |
    | — | — |
    | primary | 多端显示为蓝色。如想在多端统一颜色,请改用 default,然后自行写样式 |
    | default | 白色 |
    | warn | 红色 |

  • form-type 有效值
    | 值 | 说明 |
    | — | — |
    | submit | 提交表单 |
    | reset | 重置表单 |

  • open-type 有效值
    | 值 | 说明 |
    | — | — |
    | feedback | 打开“意见反馈”页面,用户可提交反馈内容并上传日志 |
    | share | 触发用户转发 |
    | getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息,App平台另见一键登陆 |

<template>
	<view>
		<button type="default">默认按钮</button>
		<button type="default" size="mini">mini按钮</button>
		<button type="primary">多端显示为蓝色按钮</button>
		<button type="primary" plain>镂空按钮</button>
		<button type="primary"disabled>禁用按钮</button>
		<button loading>等待按钮</button>
	</view>
</template>

image-20211211194909306.png

媒体组件

image 组件

  • <image> 组件默认宽度 300px、高度 225px;app-nvue平台,暂时默认为屏幕宽度
  • src 仅支持相对路径、绝对路径,支持 base64 码,推荐使用绝对路径。
  • 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform} ,可优化此问题。
  • 部分平台不支持 webp、svg 格式图片。
属性名 类型 默认值 说明 平台差异说明
src String 图片资源地址
mode String ‘scaleToFill’ 图片裁剪、缩放的模式
lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效 微信小程序、百度小程序、字节跳动小程序、飞书小程序
fade-show Boolean true 图片显示动画效果 仅App-nvue 2.3.4+ Android有效
@error HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’}
@load HandleEvent 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}
  • mode 有效值

    mode 有 14 种模式,其中 5 种是缩放模式,9 种是裁剪模式。

    模式 说明
    缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
    缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
    缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
    缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变
    缩放 heightFix 高度不变,宽度自动变化,保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
    裁剪 top/bottom/center/ left/right top 不缩放图片,只显示图片的顶部区域 botton 不缩放图片,只显示图片的底部区域 center 不缩放图片,只显示图片的中间区域 left 不缩放图片,只显示图片的左边区域 right 不缩放图片,只显示图片的右边区域
    裁剪 top left / top right top left 不缩放图片,只显示图片的左上边区域 top right 不缩放图片,只显示图片的右上边区域
    裁剪 bottom left / bottom right bottom left 不缩放图片,只显示图片的左下边区域 bottom right 不缩放图片,只显示图片的右下边区域
    <template>
    	<view>
    		<image src="../../static/logo.png" mode="top"></image>
    	</view>
    </template>
    

uni-ui 组件库

uni-ui 是 DCloud 提供的一个跨端 ui 库,它是基于 vue 组件的、flex 布局的、无 dom 的跨全端ui框架。详情文章来源地址https://www.toymoban.com/news/detail-515079.html

到了这里,关于uniApp:基本组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp uni-icons 组件为例 带着大家使用并熟悉一次文档

    uni的组件都可以直接进入官网 https://uniapp.dcloud.net.cn/ 然后点击右上角的搜索 直接在输入框中 搜索 uni-icons 下面内容就都出来了 在最上面先点击下载和按在 进入界面后 点击箭头指向出 进行下载 如果你系统 有HBuilder X 就会自动打开 要你选择安装在哪一个项目里 如果你的HBu

    2024年02月13日
    浏览(20)
  • Visual Studio中C++部分的官方文档链接【微软(Microsoft)所有产品的官方文档链接】

    目前(2022年07月),微软官方网站上关于Visual Studio的文档,最老的版本也是VS2015了,如下图所示: 微软所有产品的文档目录: 中文版:https://docs.microsoft.com/zh-CN/documentation/ 英文版:https://docs.microsoft.com/en-us/documentation/ Visual Studio中C++部分的官方文档: 中文版:https://docs.microso

    2024年02月07日
    浏览(40)
  • MySQL官方文档如何查看,MySQL中文文档

    MySQL官网地址:https://dev.mysql.com/doc/ 比如这里我要找InnoDB架构 MySQL 5.1中文文档地址:https://www.mysqlzh.com/

    2024年02月07日
    浏览(19)
  • ClickHouse中文官方文档

    ClickHouse® 是一个面向列的数据库管理系统 (DBMS),用于查询的在线分析处理 (OLAP)。 在“正常”的面向行的 DBMS 中,数据按以下顺序存储: 排 手表ID Java启用 标题 好活动 事件时间 #0 89354350662 1 投资者关系 1 2016-05-18 05:19:20 #1 90329509958 0 联系我们 1 2016-05-18 08:10:20 #2 89953706054 1 使

    2024年02月08日
    浏览(28)
  • OKHttp_官方文档[译文]

    OKHttp功能类介绍 OKHttp网络请求流程分析 OKHttp连接池 OKHttp分发器 OKHttp拦截器 RetryAndFollowUpInterceptor BridgeInterceptor CacheInterceptor ConnectInterceptor CallServerInterceptor 总览 OkHttp HTTP是现代应用程序网络的方式。这就是我们交换数据和媒体的方式。有效地执行HTTP可使您的内容加载更快并

    2024年02月08日
    浏览(18)
  • hutool 官方文档

    Hutool 是一个 Java 工具包,提供了很多方便的工具方法来帮助开发人员编写 Java 代码。它的官方文档可以在下面的网址查看: https://www.hutool.cn/docs/#/ 这个网站包含了 Hutool 的所有相关文档,包括如何使用各种工具方法、如何自定义扩展等。如果你正在使用 Hutool,建议经常浏览

    2024年02月08日
    浏览(67)
  • RTOS官方文档学习

    一个程序可以只有任务、只有协程、二者都有,但不可以通过队列/信号量互相传递数据 任务之间可以互相独立 每个任务分配自己的堆栈,提高了RAM使用率 操作简单、按优先级抢占式执行 抢占容易导致重入(执行任务时被其他线程或进程调用了) 一般用于小型,RAM有限制的

    2024年02月11日
    浏览(22)
  • Opentsdb官方优化文档 - 翻译

    Tuning — OpenTSDB 2.4 documentation As with any database there are many tuning parameters for OpenTSDB that can be used to improve write and read performance. Some of these options are specific to certain backends, others are global. 翻译: 与任何数据库一样,OpenTSDB有许多调优参数可用于提高写和读性能。其中一些选项是特定于

    2024年01月16日
    浏览(72)
  • C# 微软官方学习文档

    链接:https://learn.microsoft.com/zh-cn/dotnet/csharp/ 在C#的学习过程中,我们可以参考微软官方的学习文档。它是一个免费的学习平台,提供了丰富的C#学习路径和教程(如下图),对我们入门到高级应用开发都很有帮助。 如果我们想初步了解可以看 了解如何使用C# 模块: 学习或查

    2024年04月25日
    浏览(22)
  • 翻译docker官方文档(残缺版)

    The order of Dockerfile instructions matters. A Docker build consists of a series of ordered build instructions. Each instruction in a Dockerfile roughly translates to an image layer. The following diagram illustrates how a Dockerfile translates into a stack of layers in a container image. Dockerfile指令的顺序很重要。Docker构建由一系列有序的构

    2024年02月07日
    浏览(17)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包