当前位置: 首页 > news >正文

Uni-app入门到精通:uni-app的基础组件

  1、view

  view是容器组件,类似于HTML中的<div></div>标签,用于包裹各种元素内容,是页面布局常用的组件。view组件的属性如下

属性类型默认值说明
hover-classStringnone指定按下去的样式类。当hover-class="none"时,没有点击效果
hover-stop-propagationBooleanfalse指定是否阻止某节点的祖先节点出现点击态
hover-start-timeNumber50

按住后多久出现点击态,单位为毫秒(ms)

hover-stay-timeNumber400手指松开后点击态保留时间,单位为毫秒(ms)

  演示view组件的属性用法

  中本实例中,添加一个view组件,通过设置hover-class属性的值,实现点击该view组件,改变其背景颜色。在该view组件中放置一个更小的view组件,通过hover-stop-propagation属性设置是否阻止冒泡行为。演示效果如下:

具体代码如下:

<template><view  class="content"><view class="viewbox"><text>view的使用</text><view class="outbox" hover-class="outhover" hover-start-time="500"hover-stay-time="1600"><view class="inbox" hover-class="inhover" hover-start-time="500"hover-stay-time="1600" :hover-stop-propagation="true"></view></view></view></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style>.content{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}.viewbox{padding: 30rpx;}.outbox{width: 300rpx;height: 300rpx;background-color: plum;border: 1px solid paleturquoise;}.inbox{width: 200rpx;height: 200rpx;background-color: aquamarine;}.outhover{background-color: palegreen;}.inhover{background-color: palevioletred;}
</style>

2、text

  text组件用于包裹文本内容,类似于HTML中的<span></span>标签。其属性如下:

属性类型默认值说明
selectableBooleanfalse指定文本是否可选(在微信小程序中用user-select属性)
spaceString指定显示连续空格
decodeBooleanfalse指定是否解码

  decode可以解析的内容有&nbsp;、&lt、&gt:、&amp;、&apos;、&ensp;、&emsp;。

  space属性值的说明如下:

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

  本例中文本内容含有&lt;、&gt;、空格。读者可以自行修改space属性的值,查看页面效果。

具体代码如下:

<template><view  class="content"><view class="viewbox"><text>view的使用</text><view class="outbox" hover-class="outhover" hover-start-time="500"hover-stay-time="1600"><view class="inbox" hover-class="inhover" hover-start-time="500"hover-stay-time="1600" :hover-stop-propagation="true"></view></view></view><view class="textbox"><text space="ensp" :decode="true">{{words}}</text></view></view>
</template><script>export default {data() {return {words:'永不放弃是实现梦想的唯一途径!&lt;语录&gt;'}},methods: {}}
</script>

3、navigator

  navigator组件用于实现页面跳转,类似于HTML中<a></a>标签,但只能实现本地页面的跳转。注意,目标页面必须在pages.json中注册。该组件常用属性如下:
 

属性类型默认值说明
urlString指定应用内的跳转链接,值为相对或绝对路径
open-typeStringnavigate指定跳转方式,取值如下表
hover-classStringnavigate-hover指定点击时的样式类,当值为none时,没有点击态

open-type属性的有效值如下:

有效值说明
navigate保留当前页面,跳转到应用内的某个页面
redirect关闭当前页面,跳转到应用内的某个页面
switchTab跳转到tabBar页面,并关闭其他所有非tabBar页面
reLaunch关闭所有页面,打开应用内的某个页面
navigateBack关闭当前页面,返回上一页面或多级页面

演示navigator组件的3种不同形式的导航。

  在本例中,3个按钮可实现不同形式的跳转。点击第一个按钮跳转的新页面(这里设置为index.vue)中有【返回】按钮。点击第二个按钮关闭当前页后跳转到其他页面(这里设置为index.vue)。点击第三个按钮跳转到tabBar页面(这里设置为flex.vue)。演示效果如下:

在compony.vue文件中的视图层<template></template>里面添加以下代码。

<view class="navbox"><text>navigator的使用</text><view class="btnnav"><navigator url="../index/index.vue"><button type="primary" size="mini">新页面</button></navigator><navigator url="../index/index.vue" open-type="redirect"><button type="primary" size="mini">当前页</button></navigator><navigator url="../flex/flex.vue" open-type="switchTab"><button type="primary" size="mini">tabBar页</button></navigator></view></view>

在<style></style>里面添加对应的样式。

.navbox{width: 100%;}.btnnav{display: flex;justify-content: space-between;margin-top: 20rpx;}

4、image

  image组件用来展示图片,默认宽度为320px、高度为240px,其src属性支持相对路径、绝对路径,支持base64码。image组件常用属性如下:

属性类型默认值说明
srcString指定图片资源地址
modeString‘scale ToFill’指定图片裁剪、缩放的模式

其中,mode一共有14个有效值,包括5种缩放模式的值和9种裁剪模式的值

说明
scaleToFill不保持宽高比缩放图片,使图片的宽度完全拉伸至填满image组件
aspectFit保持宽高比缩放图片,使长边完全显示出来
aspectFill保持宽高比缩放图片,使短边完全显示出来
widthFix宽度不变,高度自动变化,保持原图宽高比不变
heighFix高度不变,宽度自动变化,保持原图宽高比不变


http://www.mrgr.cn/news/97436.html

相关文章:

  • 量子纠错码实战:从Shor码到表面码
  • k8s的StorageClass存储类和pv、pvc、provisioner、物理存储的链路
  • WebRTC技术简介及应用场景
  • 蓝桥杯 web 展开你的扇子(css3)
  • 通过ansible+docker-compose快速安装一主两从redis+三sentinel
  • Gateway 网关 快速开始
  • verilog学习--1、语言要素
  • 【大模型深度学习】如何估算大模型需要的显存
  • C# 与 相机连接
  • 使用python-pptx操作PowerPoint文档详解
  • Django接入 免费的 AI 大模型——讯飞星火(2025年4月最新!!!)
  • 十、C++速通秘籍—多进程
  • Java八股文-List集合
  • 量子计算入门:Qiskit实战量子门电路设计
  • 【QT】QT的多界面跳转以及界面之间传递参数
  • 【stm32--HAL库DMA+USART+空闲中断不定长收发数据】
  • py文件打包为exe可执行文件,涉及mysql连接失败以及找不到json文件
  • 时间梯度匹配损失 TGMLoss
  • 12.青龙面板自动化我的生活
  • 【MySQL】常用SQL--持续更新ing