uniapp组件+es6

View

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

Text

可选文本

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选

scroll-view

纵向滚动 scroll-y，默认值为false.

横向滚动 scroll-x，默认值为false.

横向滚动有更多

父 scroll-x=”true”

style->//一行显示 white-space:nowrap;

子 style 横向排列 disable:inline-block;

Swiper

轮播图

属性名	类型		默认值		说明
indicator-dots	Boolean		false		是否显示面板指示点
indicator-color	Color		rgba(0, 0, 0, .3)		指示点颜色
indicator-active-color	Color		#000000		当前选中的指示点颜色
interval		Number		5000		自动切换时间间隔
duration		Number		500		滑动动画时长	app-nvue不支持
circular		Boolean		false		是否采用衔接滑动，即播放到末尾后重新回到开头
vertical		Boolean		false		滑动方向是否为纵向

单位：vw(视图的宽度）100vw等于全屏；vh视图的高度

mode	String		'scaleToFill'		图片裁剪、缩放的模式
模式		值		说明(mode=”值”)
缩放		scaleToFill		不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放		aspectFit		保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放		aspectFill		保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。（最重要+width=100%,height=100%）
缩放		widthFix		宽度不变，高度自动变化，保持原图宽高比不变

navigator

uni.navigateTo(){url：”...”}

页面路由，页面跳转open-type

Button

属性名

类型

默认值

说明

值

size

String

default

按钮的大小

default	默认大小
mini	小尺寸

type

String

default

按钮的样式类型

primary	蓝，绿
default	白色
warn	红色

plain

Boolean

false

按钮是否镂空，背景色透明

disabled

Boolean

false

是否禁用

Boolean

false

名称前是否带 loading 图标

H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)

form-type

String

用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件

Input

属性名

类型

默认值

说明

值

value

String

输入框的初始内容

type

String

text

input 的类型有效值

值	说明
none	无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
text	使用用户本地区域设置的标准文本输入键盘。
decimal	小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。
number	数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。
tel	电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。
search	为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。
email	为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> 。
url	为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> 。

password

Boolean

false

是否是密码类型

H5和App写此属性时，type失效

placeholder

String

输入框为空时占位符

placeholder-style

String

指定 placeholder 的样式

placeholder-class

String

"input-placeholder"

指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/

抖音小程序、飞书小程序、快手小程序不支持

disabled

Boolean

false

是否禁用

maxlength

Number

140

最大输入长度，设置为 -1 的时候不限制最大长度

confirm-type

String

done

设置键盘右下角按钮的文字，仅在 type="text" 时生效。有效值

值	说明
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

带清除按钮的输入框

可查看密码的输入框

动态绑定

v-bind:;可简写为：；

:class=”’active’”=:class=”{active:true}”

:style=”{widht=’100px’}”

双向绑定 v-modol=”变量”

计算属性用法

computed 是一个计算函数方法，需要引入，调用不用加（）。

有缓存。

可读，不能直接改值。

例子:购物车

checkbox-group->

@change 方法=detail={value:[选中的checkbox的value的数组->!!!value必须是string->:value="item.id"

属性名	类型	默认值	说明
value	String		`<checkbox>` 标识，选中时触发 `<checkbox-group>` 的 change 事件，并携带 `<checkbox>` 的 value。
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中

勾选时会自动计算勾选数量和价格->准确定位有include功能（遍历中筛选）

`includes` 方法

includes 是 JavaScript 中数组和字符串对象的一个方法，用于检查某个值是否存在于数组或字符串中。

在代码片段 selsect.value.includes(item.id) 中：

selsect.value 是一个字符串。
item.id 是一个变量，通常是一个标识符，比如一个数字或字符串。

includes 方法的作用是判断 selsect.value 这个字符串是否包含 item.id 这个子字符串。如果包含，则返回 true；否则返回 false。

`filter` 方法

filter 方法用于创建一个新数组，其中包含通过指定函数测试的所有元素。换句话说，它会根据一个条件筛选出符合条件的元素。

例子：goods.value.filter(item => item.checked)

遍历 goods.value 数组，并返回一个新数组，只包含那些 checked 属性为 true 的元素。

`reduce` 方法

reduce 方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

const totalprince=computed(()=>goods.value.filter(item=>item.checked).reduce((prev,curr)=>prev+curr.price,0))

对经过 filter 筛选后的数组进行累加操作，计算所有选中商品的总价格。具体来说：

prev 是累计器，保存了之前累加的结果。
curr 是当前正在处理的商品对象。
prev + curr.price 是将当前商品的价格加到累计器上。
0 是初始值，表示从零开始累加。

监听

引入 form "vue‘’

监听ref值：watch(ref属性，回调函数（newValue，oldValue））浅层监听，后台有值

监听对象：

watch(()=>对象名.value.属性，回调函数（newValue，oldValue））
watch(ref属性，回调函数（newValue，oldValue）,{deep:true}）深度监听
watch(ref属性，回调函数（newValue，oldValue）,{deep:true，immediate:true}）深度立即执行

监听多个：

watch([new1,new2],[old1,old2])=>{})

监听所有

watchEffect((=>{})

Props数据传输

父 fu.vue ; 子zi.vue

父传子

子 script中 const 属性名=defineprops([‘传输类名’,....]);在template中直接引入{{}}

defineprops([‘传输类名’,....]);在template中直接引入{{}} 不能将传输类名直接打印输出

父 template中<zi : 传输类名=ref属性></zi>

默认值：

在defineProps写一个对象+default属性



const props=defineProps(
{username:{type:String，default:“匿名”},
{avtar:{type:String，default:“../../image1.png”}
)

插槽

子传父

子的数据父展示（$emit || emit("自定义的事件",传输的值）

defineExpose向外导出

使用defineExpose暴露子组件

//子组件script
defineExpose({
count,//上文有声明 const count
str:"111",
updateCount//函数方法
})
//父组件 template引入子组件后<zi ref="child"></zi>
const uodate=fundation(){
child.value.updateCount()
}

生命周期

onShow和onHide

注意页面显示，是一个会重复触发的事件。

a页面刚进入时，会触发a页面的onShow。

当a跳转到b页面时，a会触发onHide，而b会触发onShow。

但当b被关闭时，b会触发onUnload，此时a再次显示出现，会再次触发onShow。

在tabbar页面（指pages.json里配置的tabbar），不同tab页面互相切换时，会触发各自的onShow和onHide。

函数	说明
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页
onPageScroll	监听页面滚动，参数为Object（包含scrollTop）

交互反馈->函数

API	说明
uni.showToast	显示提示框
uni.showLoading	显示加载提示框
uni.hideToast	隐藏提示框
uni.hideLoading	隐藏加载提示框
uni.showModal	显示模态弹窗
uni.showActionSheet	显示菜单列表

uni.showToast

参数	类型	必填	说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明，默认：success。
image	String	否	自定义图标的本地路径（app端暂不支持gif）
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 `title` 属性生效，且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.showLoading(OBJECT)

参数	类型	必填	说明
title	String	是	提示的文字内容，显示在loading的下方
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数 fail:err=>{uni.hidden}
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.showToast（{
  title："加载...",
  mask:"ture",
   fail:err=>{uni.hidden}
}）

uni.showModal(OBJECT)

title	String	否	提示的标题
content	String	否	提示的内容
showCancel	Boolean	否	是否显示取消按钮，默认为 true
cancelText	String	否	取消按钮的文字，默认为"取消"
cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#000000"
confirmText	String	否	确定按钮的文字，默认为"确定"
confirmColor	HexColor	否	确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#576B95"，百度小程序平台默认为"#3c76ff"
editable	Boolean	否	是否显示输入框
placeholderText	String	否	显示输入框时的提示文本
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.showActionSheet(OBJECT)

从底部向上弹出操作菜单

title	String	否	菜单标题
alertText	String	否	警示文案（同菜单标题）
itemList	Array<String>	是	按钮的文字数组
itemColor	HexColor	否	按钮的文字颜色，字符串格式，默认为"#000000"
popover	Object	否	大屏设备弹出原生选择按钮框的指示区域，默认居中显示
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

参数	类型	必填	说明
frontColor	String	是	前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundColor	String	是	背景颜色值，有效值为十六进制颜色
animation	Object	否	动画效果，{duration,timingFunc}
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

属性	类型	必填	说明
index	number	是	tabBar 的哪一项，从左边算起
text	String	否	tab 上的按钮文字
pagePath	String	否	页面绝对路径，必须在 pages 中先定义，被替换掉的 pagePath 不会变成普通页面（仍然需要使用 uni.switchTab 跳转）

uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。

参数	类型	必填	说明
index	Number	是	tabBar的哪一项，从左边算起
text	String	是	显示的文本，不超过 3 个半角字符
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.removeTabBarBadge(OBJECT)

index	Number	是	tabBar的哪一项，从左边算起
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行

uni.showTabBarRedDot(OBJECT)

显示 tabBar 某一项的右上角的红点。

参数	类型	必填	说明
index	Number	是	tabBar的哪一项，从左边算起

StorageSync数据缓存API

uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

key相同会被覆盖

uni.getStorage(OBJECT)

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

发起网络请求repuest

uni.request(OBJECT)

参数名	类型	必填	默认值	说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms
dataType	String	否	json	如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer

#培训阶段

uniapp组件+es6

http://localhost:8090//archives/uniappzu-jian-es6

作者

文伊仪

发布于

2025年03月03日

许可协议

springboot学习上一篇

TypeScript学习下一篇

uniapp组件+es6

View

Text

scroll-view

横向滚动有更多

轮播图

navigator

页面路由，页面跳转open-type

Button

Input

带清除按钮的输入框

可查看密码的输入框

计算属性用法

includes 方法

filter 方法

reduce 方法

监听

Props数据传输

父传子

插槽

子传父

defineExpose向外导出

生命周期

onShow和onHide

交互反馈->函数

uni.showToast

uni.showLoading(OBJECT)

uni.showModal(OBJECT)

uni.showActionSheet(OBJECT)

uni.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

uni.setTabBarItem(OBJECT)

uni.setTabBarBadge(OBJECT)

uni.removeTabBarBadge(OBJECT)

uni.showTabBarRedDot(OBJECT)

StorageSync数据缓存API

uni.setStorageSync(KEY,DATA)

uni.getStorage(OBJECT)

发起网络请求repuest

uni.request(OBJECT)

`includes` 方法

`filter` 方法

`reduce` 方法