uniApp页面交互

uniApp实现界面的交互，实现提示信息

uni.showToast(OBJECT)

示例

uni.showToast({title: '标题',icon: 'success',  //success:成功，error:失败duration: 6000, //提示延迟时间，单位毫秒，默认1500postion: 'center', //显示位置，top:居上显示，center:居中显示，bottom:居底显示
})

icon 值说明

值	说明	平台差异说明
success	显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。	支付宝小程序无长度无限制
error	显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。	支付宝小程序、快手小程序、抖音小程序、百度小程序、京东小程序、QQ小程序不支持
fail	显示错误图标，此时 title 文本无长度显示。	支付宝小程序、抖音小程序
exception	显示异常图标。此时 title 文本无长度显示。	支付宝小程序
loading	显示加载图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。	支付宝小程序不支持
none	不显示图标，此时 title 文本在小程序最多可显示两行。

uni.showLoading(OBJECT)

示例

uni.showLoading({title: '加载中...'
})

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

uni.hideLoading()

示例

uni.showLoading({title: '加载中'
});setTimeout(function () {uni.hideLoading();
}, 2000);

隐藏 loading 提示框。

uni.showModal(OBJECT)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。
示例：

uni.showModal({title: '提示',content: '这是一个模态弹窗',success: function (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}
});

注意：如果在uni.showModal中需要使用this对象中的属性，需要在外面进行

OBJECT参数说明

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

success返回参数说明

参数	类型	说明	平台差异说明
confirm	Boolean	为 true 时，表示用户点击了确定按钮
cancel	Boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）
content	String	editable 为 true 时，用户输入的文本	H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）

uni.showActionSheet(OBJECT)

从底部向上弹出操作菜单
示例

uni.showActionSheet({itemList: ['A', 'B', 'C'],success: function (res) {console.log('选中了第' + (res.tapIndex + 1) + '个按钮');},fail: function (res) {console.log(res.errMsg);}
});

OBJECT参数说明

参数	类型	必填	说明	平台差异说明
title	String	否	菜单标题	App、H5、支付宝小程序、钉钉小程序、微信小程序 3.4.5+（仅真机有效）
alertText	String	否	警示文案（同菜单标题）	微信小程序（仅真机有效）
itemList	Array	是	按钮的文字数组	微信、百度、抖音小程序数组长度最大为6个
itemColor	HexColor	否	按钮的文字颜色，字符串格式，默认为"#000000"	App-iOS、飞书小程序不支持
popover	Object	否	大屏设备弹出原生选择按钮框的指示区域，默认居中显示	App-iPad（2.6.6+）、H5（2.9.2）
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

popover 值说明

值	类型	说明
top	Number	指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度
left	Number	指示区域坐标
width	Number	指示区域宽度
height	Number	指示区域高度

success返回参数说明

参数	类型	说明
tapIndex	Number	用户点击的按钮，从上到下的顺序，从0开始