uniapp常用标签

已于 2024-08-30 17:27:38 修改
阅读量623 收藏 2
点赞数 6
分类专栏： vue 文章标签： uni-app
于 2024-08-20 23:54:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1241436267/article/details/141370322
版权

一.uni-app常用标签

uni-app标签
名称作用
view类似于HTML中的div标签通常用于布局和包裹其他标签

scroll-view

可滚动视图区域。用于区域滚动

swiper

一般用于左右滑动或上下滑动，比如banner轮播图
image类似于HTML中的img标签,用于存放图片
text文本组件。用于包裹文本内容
该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册

二. 标签用法

1.view

类似于HTML中的div标签通常用于布局和包裹其他标签

属性说明

属性名类型默认值说明
hover-classStringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-timeNumber50按住后多久出现点击态，单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒

2.scroll-view

在指定的区域设置一块可以左右滚动的区域,通常用于下拉刷新和商品主体部分

属性说明

属性名类型默认值说明平台差异说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber/String50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-thresholdNumber/String50距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-topNumber/String设置竖向滚动条位置
scroll-leftNumber/String设置横向滚动条位置
scroll-into-viewString值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向app-nvue，微信小程序
show-scrollbarBooleanfalse控制是否出现滚动条App-nvue 2.1.5+
refresher-enabledBooleanfalse开启自定义下拉刷新H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-thresholdNumber45设置自定义下拉刷新阈值H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-styleString"black"设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-backgroundString"#FFF"设置自定义下拉刷新区域背景颜色H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggeredBooleanfalse设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flexBooleanfalse启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。微信小程序 2.7.3
scroll-anchoringBooleanfalse开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。微信小程序 2.8.2
@scrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件
@scrollEventHandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpullingEventHandle自定义下拉刷新控件被下拉H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefreshEventHandle自定义下拉刷新被触发H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestoreEventHandle自定义下拉刷新被复位H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabortEventHandle自定义下拉刷新被中止H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

代码示例

<template>
	<scroll-view class="scrollview" scroll-y="true">
		<view class="box">0</view>
		<view class="box">1</view>
		<view class="box">2</view>
		<view class="box">3</view>
		<view class="box">4</view>
		<view class="box">5</view>
		<view class="box">6</view>
		<view class="box">7</view>
		<view class="box">8</view>
		<view class="box">9</view>
	</scroll-view>
</template>

<script>

</script>

<style>
	.scrollview {
		height: 100px;
		border: 1px solid red;
		white-space: nowrap;
	}

	.box {
		widows: 100px;
		height: 100px;
		background-color: aqua;

	}
</style>

3.swiper

用于制作轮播图

属性说明

属性名类型默认值说明平台差异说明
indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorColor#000000当前选中的指示点颜色
active-classStringswiper-item 可见时的 class支付宝小程序
changing-classStringacceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class支付宝小程序
autoplayBooleanfalse是否自动切换
currentNumber0当前所在滑块的 index
current-item-idString当前所在滑块的 item-id ，不能与 current 被同时指定支付宝小程序不支持
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长app-nvue不支持
circularBooleanfalse是否采用衔接滑动，即播放到末尾后重新回到开头
verticalBooleanfalse滑动方向是否为纵向
previous-marginString0px前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值app-nvue、抖音小程序、飞书小程序不支持
next-marginString0px后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值app-nvue、抖音小程序、飞书小程序不支持
accelerationBooleanfalse当开启时，会根据滑动速度，连续滑动多屏支付宝小程序
disable-programmatic-animationBooleanfalse是否禁用代码变动触发 swiper 切换时使用动画。支付宝小程序
display-multiple-itemsNumber1同时显示的滑块数量app-nvue、支付宝小程序不支持
skip-hidden-item-layoutBooleanfalse是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息App、微信小程序、京东小程序
disable-touchBooleanfalse是否禁止用户 touch 操作App 2.5.5+、H5 2.5.5+、支付宝小程序、抖音小程序与飞书小程序（只在初始化时有效，不能动态变更）
touchableBooleantrue是否监听用户的触摸事件，只在初始化时有效，不能动态变更抖音小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-functionStringdefault指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic微信小程序、快手小程序、京东小程序
@changeEventHandlecurrent 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transitionEventHandleswiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dyApp、H5、微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序
@animationfinishEventHandle动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}抖音小程序与飞书小程序不支持

代码示例

<template>
<swiper class="swiper" indicator-dots autoplay interval="1000">
	<swiper-item class="swiperview">111</swiper-item>
	<swiper-item class="swiperview">222</swiper-item>
	<swiper-item class="swiperview">333</swiper-item>
	<swiper-item class="swiperview">444</swiper-item>
	</swiper>
</template>

<script>

</script>

<style>
	.swiper {
		height: 100px;
		border: 1px solid red;
		white-space: nowrap;
	}

	.swiperview {
		widows: 100px;
		height: 100px;
		background-color: aqua;

	}
</style>

4.image

相对于HMTL中的img,用于展示图片

属性说明

属性名类型默认值说明平台差异说明
srcString图片资源地址
modeString'scaleToFill'图片裁剪、缩放的模式
lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效微信小程序、百度小程序、抖音小程序、飞书小程序
fade-showBooleantrue图片显示动画效果仅App-nvue 2.3.4+ Android有效
webpbooleanfalse在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明微信小程序2.9.0
show-menu-by-longpressbooleanfalse开启长按图片显示识别小程序码菜单微信小程序2.7.0
draggablebooleantrue是否能拖动图片H5 3.1.1+、App（iOS15+）
@errorHandleEvent当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
@loadHandleEvent当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

代码示例

<template>
	<scroll-view class="scrollview" scroll-y="true">
		<image src="../../static/1.jpeg" class="imger"></image>
		<image src="../../static/2.jpeg" class="imger"></image>
		<image src="../../static/3.png" class="imger"></image>
		<image src="../../static/4.jpg" class="imger"></image>
		<image src="../../static/5.png" class="imger"></image>
	</scroll-view>
</template>

<script>

</script>

<style>
	.scrollview {
		height: 280px;
		border: 1px solid red;
	}
</style>

5.text

属性说明

属性名类型默认值说明平台差异说明
selectableBooleanfalse文本是否可选
user-selectBooleanfalse文本是否可选微信小程序
spaceString显示连续空格钉钉小程序不支持
decodeBooleanfalse是否解码百度、钉钉小程序不支持
space

默认情况无论添加多少个空格,都会编译成一个.通过这个属性可以添加多个

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

6.navigator

属性说明

属性名类型默认值说明平台差异说明
urlString应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-typeStringnavigate跳转方式
deltaNumber当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-typeStringpop-in/out当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画App
animation-durationNumber300当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。App
render-linkbooleantrue是否给 navigator 组件加一层 a 标签控制 ssr 渲染web3.7.6+、App-vue3.7.6+
hover-classStringnavigator-hover指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态微信小程序
hover-start-timeNumber50按住后多久出现点击态，单位毫秒
hover-stay-timeNumber600手指松开后点击态保留时间，单位毫秒
targetStringself在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram微信2.0.7+、百度2.5.2+、QQ
值说明平台差异说明
navigate对应 uni.navigateTo 的功能
redirect对应 uni.redirectTo 的功能
switchTab对应 uni.switchTab 的功能
reLaunch对应 uni.reLaunch 的功能抖音小程序与飞书小程序不支持
navigateBack对应 uni.navigateBack 的功能
exit退出小程序，target="miniProgram"时生效微信2.1.0+、百度2.5.2+、QQ1.4.7+

7.button

属性说明

属性名类型默认值说明生效时机平台差异说明
sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
form-typeString用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
open-typeString开放能力
hover-classStringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果App-nvue 平台暂不支持
hover-start-timeNumber20按住后多久出现点击态，单位毫秒
hover-stay-timeNumber70手指松开后点击态保留时间，单位毫秒

                                                

小汤猿人类
关注
专栏目录
uniapp常用图标.zip
01-15
"uniapp常用图标.zip"这个压缩包很可能包含了一组专门为 UniApp 设计的常见图标集合。 在压缩包中的"base"文件可能是这些图标的资源库，包含了不同格式和大小的图标文件，如SVG、PNG或者字体文件（.ttf或.woff），...
[保姆级教程]uniapp自定义标签页切换组件
肥晨开发的学习之路
06-22 1530
，直接修改组件比手写一个还麻烦，下面手写一个。在data中定义列表，和当前展示的页面值。然后实现默认样式，和标签页点击样式。使用index索引值，判断滑动位置。做一个滑动，不然多的话滑动不了。先创建好组件，一般放在。在父页面中引入组件，在。
Uni-APP标签
小菜鸟的博客
11-24 8506
Uni-APP Uni-app是一个跨平台的开发框架，学会Uni-APP之后可以跨发除iOS，Android，h5，以及各种小程序的应用，不需要再去学习其他应用的框架 uni-app常用开发软件 对uni-app比较友好的软件 微信开发者工具 下载微信小程序的使用工具 创建项目 打开hbuilderx 创建项目选择uni-app选项 创建好一个项目后点击运行到谷歌 运行在微信小程序的时候需要先配置路径 并且在设置中打开端口号才行 这样环境都配完之后就可以运行了 目录文件 pages 存放所有
uniapp常见的标签
xiaowude_boke的博客
12-26 1348
uniapp的标签
uni-app常用标签详解
m0_74831742的博客
06-17 6405
view>
【uniapp】介绍、常用标签、请求&localStorage封装
weixin_52479803的博客
03-03 3014
【uniapp】介绍、常用标签、请求&localStorage封装
快速上手uni-app,基础知识，基本使用
热门推荐
搬砖猴哥
12-26 1万+
####uni-app的基本使用 视频链接：uni-app配套视频 知识介绍： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 uni-app介绍 官方网页 uni-app 是一个使用 ...
简述uniapp的image标签的mode属性
qq_53114797的博客
06-26 6953
uni-app的image标签是用于显示图片的组件，而mode属性则用于设置图片的显示模式，这个也是传统 web 开发中的。Uniapp 的与传统 web 开发中的相比多了一个mode属性，用来设置图片的裁剪、缩放模式。在开发中尽量养成每一个都设置mode的习惯。可以。一般只需要使用widthFixaspectFill这两个属性即可应对绝大多数情况。即只需设置宽度自动撑起高度的图片用widthFix；需要固定尺寸设置宽高，并保持图片不被拉伸的图片用。
uni-app图片显示
gugugutime.com
11-25 4632
image标签
uniapp的基础插件库
02-01
例如：使用uni-card，直接在vue页面中（非app.vue页面）加入标签即可。 没有阴影，不带任何属性的卡片 /uni-card> 其中的各项参数，参考uniapp官网的 组件 ——> 扩展组件 ——> uni-card 部分。
uniapp 底部导航设置
12-14
在uniapp中，底部导航（Bottom Navigation）是应用中常用的一种布局方式，它通常包含多个可切换的选项卡，用于展示不同的功能模块。本篇将详细介绍如何在uniapp中进行底部导航的设置。 首先，uniapp是基于Vue.js...
uniapp 在线预览pdf文件
04-11
在Web开发中，一个常用的方法是通过`<iframe>`标签嵌入PDF文件。uniapp支持在H5页面上使用HTML元素，因此我们可以在uniapp项目中创建一个`<iframe>`，并设置其`src`属性为PDF文件的URL。例如： ```html ...
uniapp主页面示例.rar
05-21
【标签】"uniapp" 进一步强调了这个压缩包与uniapp框架紧密相关，内容可能涵盖uniapp的基础概念、核心组件、页面路由、数据管理、生命周期方法、自定义组件以及如何进行平台适配等方面的知识。 【uniapp.docx】 ...
uniapp制作app与小程序前端——标签
hk_hkl的博客
05-11 301
手把手玩转uinapp前端No.9
uni-app基本标签
weixin_64822448的博客
12-18 908
`navigationBarBackgroundColor`: 设置导航栏的背景颜色（全局页面）- `navigationBarTextStyle`: 导航栏标题颜色（仅支持 `black` 和 `white`）- `navigationBarTitleText`: 设置导航栏标题内容- `enablePullDownRefresh`: 是否开启页面下拉刷新。
uniapp运行到安卓基座app/img标签不显示
Xiang_Gong_Ya_的博客
12-01 1678
img是html中的标签，他也是一个单标签image属于服务器控件，是个双标签。
uniapp踩坑-img标签在真机运行加载不成功，浏览器加载成功
caixuanji的博客
11-11 2723
uniapp踩坑-img标签在真机运行加载不成功，浏览器加载成功 前言-背景 最近在开发uniapp，官方文档提供的开发方式有两种，一种是通过HBulider可视化界面创建，一种是通过vue-cli命令行创建，因为可视化更加方便，所以就使用了可视化创建方式，后续因项目需实现jenkins自动化构建，而使用可视化创建方式的话，只能是通过可视化界面的打包资源操作，如下图： 每次都需要前端开发人员进行手动打包，而jenkins的自动化构建的理念是通过命令行去操作，不需要人工进行打包，使用使用可视化界面进行创建项
uniapp中如何使用image图片
精通前端技术，了解后端接口
12-26 6406
当在UniApp中使用图片时，可以通过标签将图片显示在页面上。这个标签可以指定src属性来引用图片，并且可以通过mode属性来设置图片的显示模式。除此之外，还可以利用@click事件来实现图片的点击事件。在编写代码时，要注意引用图片的路径和处理图片的点击事件，以及适配不同屏幕尺寸的情况。UniApp中的图片使用相对简单，下面的博客将详细介绍UniApp中图片的使用方法以及相关注意事项。
uniapp常用组件
最新发布
07-12
UniApp是一款基于Vue.js的跨平台应用开发框架，它提供了一套统一的API和组件库，支持快速构建原生体验的应用。常用的UniApp组件包括： 1. **页面容器**: `view` - 最基本的布局元素，用于显示内容。 2. **导航栏`: `navigator` - 提供顶部导航，常见的有底部导航栏（tabbar）和侧滑菜单。 3. **列表组件**: `list` 和 `cell` - 用于展示一系列有序或无序的数据项。 4. **卡片组件**: `picker`, `carousel` - 展示信息的模块，如选项选择、图片轮播等。 5. **表单组件**: `input`, `checkbox`, `radio`, `picker`, `datePicker`, `timePicker` - 用于收集用户输入的各种控件。 6. **弹窗组件**: `dialog`, `alert`, `confirm` - 显示提示信息、确认对话框等。 7. **加载状态**: `loading` - 显示数据加载过程的动画效果。 8. **路由管理**: `router-view` 和 `router-link` - 实现页面间的跳转和链接。 此外，还有各类UI元素和交互组件，如按钮(`button`), 分隔线(`divider`), 图片(`image`), 标签页(`tab`)等。开发者可以根据需求组合这些组件来创建丰富的用户界面。使用UniApp的组件化开发模式，可以显著提升开发效率，并且由于其跨平台特性，应用可以在iOS、Android、Web等多个平台上运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值