- 更多API，请访问 官方文档 - API - 界面
-
- wx.showToast(Object object)
-
显示消息提示框
title - 提示信息
icon - 提示图标；系统内置，数量教少
image - 自定义图片；使用后配置项icon无效
mask - 默认为false；建议开启，增加透明遮罩层，避免事件穿透
- wx.hideToast(Object object)
- 隐藏消息提示框
- wx.showLoading(Object object)
- 显示 loading 提示框
- wx.hideLoading(Object object)
- 隐藏 loading 提示框
- wx.showModal(Object object)
-
显示模态对话框；通过判断 res.confirm 还是 res.cancel 确定下一步操作
title - 提示标题
content - 提示内容
editable - 可编辑；确认后在返回结果res的content中获取
placeholderText - 占位符，显示输入框时的提示文本，此时content相当于值
- 使用编辑editable和占位placeholderText提供交互 - 修改个人信息
- 优点：不用页面跳转；不用专门创建页面
-
wx.showModal({
title: 'rename',
content: this.data.user.uname,
editable: true,
placeholderText: '8 chars',
complete: (res) => {
if (res.cancel) {
console.log('cancel', res);
}
if (res.confirm) {
console.log('confirm', res);
this.setData({
'user.uname': res.content
})
}
}
})
- wx.showActionSheet(Object object)
-
可以看作是单选的一种拓展
显示操作菜单；在事件对象res获取选中的列表tapIndex
alertText - 提示文案
itemList - 待选列表项，长度最大为6
- 选择性别
-
data: {
user: {
ugender: 'Male',
},
gender: ['Male', 'Female']
}
setUgender(){
wx.showActionSheet({
alertText:'your gender',
itemList: this.data.gender,
success:res=>{
this.setData({
'user.ugender':this.data.gender[res.tapIndex]
})
},
fail:err=>console.log(err),
complete:()=>console.log('set gender done')
})
}