一、吐司提示wx.showToast
wx.showToast({ title: '失败',//提示文字 duration:2000,//显示时长 mask:true,//是否显示透明蒙层,防止触摸穿透,默认:false icon:'success', //图标,支持"success"、"loading" success:function(){ },//接口调用成功 fail: function () { }, //接口调用失败的回调函数 complete: function () { } //接口调用结束的回调函数 })效果图如下:
二、确认对话框wx.showModal
wx.showModal({ title: '删除图片', content: '确定要删除该图片?', showCancel: true,//是否显示取消按钮 cancelText:"否",//默认是“取消” cancelColor:'skyblue',//取消文字的颜色 confirmText:"是",//默认是“确定” confirmColor: 'skyblue',//确定文字的颜色 success: function (res) { if (res.cancel) { //点击取消,默认隐藏弹框 } else { //点击确定 } }, fail: function (res) { },//接口调用失败的回调函数 complete: function (res) { },//接口调用结束的回调函数(调用成功、失败都会执行) })效果图如下:
三、底部弹出选择框wx.showActionSheet
wx.showActionSheet({ itemList: ['列1','列2','列3'],//显示的列表项 success: function (res) {//res.tapIndex点击的列表项 console.log("点击了列表项:" + that[res.tapIndex]) }, fail: function (res) { }, complete:function(res){ } })效果图如下:
四、自定义弹框modal控件
<modal hidden="{{hiddenmodalput}}" title="完善资料" confirm-text="提交" cancel-text="取消" bindcancel="cancelM" bindconfirm="confirmM"> <input bindinput='iName' type='text' placeholder="请输入姓名..." auto-focus/> <input bindinput='iPhoneNum' type='number' placeholder="请输入手机号码..." /> </modal>js代码如下:
data: { hiddenmodalput:false, name:"", phoneNum:'', }, cancelM:function(e){ this.setData({ hiddenmodalput: true, }) }, confirmM: function (e) { console.log("姓名:" + this.data.name + " 电话:" + this.data.phoneNum); }, iName: function (e) { this.setData({ name:e.detail.value }) }, iPhoneNum: function (e) { this.setData({ phoneNum: e.detail.value }) },显示效果如下:
点击取消后弹框隐藏
点击提交后打印日志如下: