交互反馈
my.alert
alert 警告框。扫码体验:
入参
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
title | String | 否 | alert框的标题 |
content | String | 否 | alert框的内容 |
buttonText | String | 否 | 按钮文字,默认确定 |
success | Function | 否 | 调用成功的回调函数 |
fail | Function | 否 | 调用失败的回调函数 |
complete | Function | 否 | 调用结束的回调函数(调用成功、失败都会执行) |
代码示例
my.alert({
title: '亲',
content: '您本月的账单已出',
buttonText: '我知道了',
success: () => {
my.alert({
title: '用户点击了「我知道了」',
});
},
});
my.confirm
confirm 确认框。扫码体验:
入参
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
title | String | 否 | confirm框的标题 |
content | String | 否 | confirm框的内容 |
confirmButtonText | String | 否 | 确认按钮文字,默认‘确定’ |
cancelButtonText | String | 否 | 确认按钮文字,默认‘取消’ |
success | Function | 否 | 调用成功的回调函数 |
fail | Function | 否 | 调用失败的回调函数 |
complete | Function | 否 | 调用结束的回调函数(调用成功、失败都会执行) |
success 返回值
名称 | 类型 | 描述 |
---|---|---|
confirm | Boolean | 点击 confirm 返回 true,点击 cancel 返回false |
代码示例
my.confirm({
title: '温馨提示',
content: '您是否想查询快递单号:
1234567890',
confirmButtonText: '马上查询',
cancelButtonText: '暂不需要',
success: (result) => {
my.alert({
title: `${result.confirm}`,
});
},
});
my.prompt
基础库1.7.2,支付宝10.1.10开始支持
入参
名称 | 类型 | 必填 | 描述 |
title | String | 否 | prompt框标题 |
message | String | 是 | prompt框文本,默认‘请输入内容’ |
placeholder | String | 否 | 输入框内的提示文案 |
align | String | 否 | message对齐方式,可用枚举left/center/right,iOS ‘center’, android ‘left’ |
okButtonText | String | 否 | 确认按钮文字,默认‘确定’ |
cancelButtonText | String | 否 | 确认按钮文字,默认‘取消’ |
success | Function | 否 | 调用成功的回调函数 |
fail | Function | 否 | 调用失败的回调函数 |
complete | Function | 否 | 调用结束的回调函数(调用成功、失败都会执行) |
success 返回值
名称 | 类型 | 描述 |
---|---|---|
ok | Boolean | 点击 ok 返回 true,点击 cancel 返回false |
inputValue | String | 当ok为true时,返回用户输入的内容 |
代码示例
my.prompt({
title: '标题单行',
message: '说明当前状态、提示用户解决方案,最好不要超过两行。',
placeholder: '给朋友留言',
okButtonText: '确定',
cancelButtonText: '取消',
success: (result) => {
my.alert({
title: JSON.stringify(result),
});
},
});
my.showToast
显示一个弱提示,可选择多少秒之后消失。扫码体验:
入参
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
content | String | 否 | 文字内容 |
type | String | 否 | toast 类型,展示相应图标,默认 none,支持 success / fail / exception / none’。其中 exception 类型必须传文字信息 |
duration | Number | 否 | 显示时长,单位为 ms,默认 2000 |
success | Function | 否 | 调用成功的回调函数 |
fail | Function | 否 | 调用失败的回调函数 |
complete | Function | 否 | 调用结束的回调函数(调用成功、失败都会执行) |
代码示例
my.showToast({
type: 'success',
content: '操作成功',
duration: 3000,
success: () => {
my.alert({
title: 'toast 消失了',
});
},
});
my.hideToast
隐藏弱提示。
代码示例
my.hideToast()
my.showLoading
显示加载提示。扫码体验:
入参
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
content | String | 否 | loading的文字内容 |
delay | Number | 否 | 延迟显示,单位 ms,默认 0。如果在此时间之前调用了 my.hideLoading 则不会显示 |
success | Function | 否 | 调用成功的回调函数 |
fail | Function | 否 | 调用失败的回调函数 |
complete | Function | 否 | 调用结束的回调函数(调用成功、失败都会执行) |
代码示例
my.showLoading({
content: '加载中...',
delay: 1000,
});
my.hideLoading
隐藏加载提示。
入参
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
page | Object | 否 | 具体指当前page实例,某些场景下,需要指明在哪个page执行hideLoading。 |
代码示例
my.hideLoading();
Page({
onLoad() {
my.showLoading();
const that = this;
setTimeout(() => {
my.hideLoading({
page: that, // 防止执行时已经切换到其它页面,page指向不准确
});
}, 4000);
}
})
my.showNavigationBarLoading
显示导航栏 loading。扫码体验:
代码示例
my.showNavigationBarLoading()
- 如果页面的标题文本长度设置的过长,将有可能导致 loading 图标不显示。
my.hideNavigationBarLoading
隐藏导航栏 loading。
代码示例
my.hideNavigationBarLoading()
my.showActionSheet
显示操作菜单。扫码体验:
入参
名称 | 类型 | 必填 | 描述 | |
---|---|---|---|---|
title | String | 否 | 菜单标题 | |
items | String Array | 是 | 菜单按钮文字数组 | |
cancelButtonText | String | 否 | 取消按钮文案。默认为‘取消’。注:Android平台此字段无效,不会显示取消按钮。 | |
destructiveBtnIndex | Number | 是 | (iOS特殊处理)指定按钮的索引号,从0开始,使用场景:需要删除或清除数据等类似场景,默认红色 | |
badges | Object Array | 否 | 需飘红选项的数组,数组内部对象字段见下表 | 1.9.0 |
success | Function | 否 | 调用成功的回调函数 | |
fail | Function | 否 | 调用失败的回调函数 | |
complete | Function | 否 | 调用结束的回调函数(调用成功、失败都会执行) |
badges数组内部对象字段
名称 | 类型 | 描述 |
index | Number | 需要飘红的选项的索引,从0开始 |
type | String | 飘红类型,支持 none(无红点)/ point(纯红点) / num(数字红点)/ text(文案红点)/ more(…) |
text | String | 自定义飘红文案: 1、type为none/point/more时本文案可不填 2、type为num时本文案为小数或<=0均不显示, >100 显示"…" |
代码示例
my.showActionSheet({
title: '支付宝-ActionSheet',
items: ['菜单一', '菜单二', '菜单三', '菜单四', '菜单五'],
badges: [
{ index: 0, type: 'none' },
{ index: 1, type: 'point' },
{ index: 2, type: 'num', text: '99' },
{ index: 3, type: 'text', text: '推荐' },
{ index: 4, type: 'more' },],
cancelButtonText: '取消好了',
success: (res) => {
const btn = res.index === -1 ? '取消' : '第' + res.index + '个';
my.alert({
title: `你点了${btn}按钮`
});
},
});