一、吐司提示wx.showToast
1 | wx.showToast({ |
2 | title: '失败',//提示文字 |
3 | duration:2000,//显示时长 |
4 | mask:true,//是否显示透明蒙层，防止触摸穿透，默认：false |
5 | icon:'success', //图标，支持"success"、"loading" |
6 | success:function(){ },//接口调用成功 |
7 | fail: function () { }, //接口调用失败的回调函数 |
8 | complete: function () { } //接口调用结束的回调函数 |
9 | }) |
二、确认对话框wx.showModal
01 | wx.showModal({ |
02 | title: '删除图片', |
03 | content: '确定要删除该图片？', |
04 | showCancel: true,//是否显示取消按钮 |
05 | cancelText:"否",//默认是“取消” |
06 | cancelColor:'skyblue',//取消文字的颜色 |
07 | confirmText:"是",//默认是“确定” |
08 | confirmColor: 'skyblue',//确定文字的颜色 |
09 | success: function (res) { |
10 | if (res.cancel) { |
11 | //点击取消,默认隐藏弹框 |
12 | } else { |
13 | //点击确定 |
14 | } |
15 | }, |
16 | fail: function (res) { },//接口调用失败的回调函数 |
17 | complete: function (res) { },//接口调用结束的回调函数（调用成功、失败都会执行） |
18 | }) |
三、底部弹出选择框wx.showActionSheet
1 | wx.showActionSheet({ |
2 | itemList: ['列1','列2','列3'],//显示的列表项 |
3 | success: function (res) {//res.tapIndex点击的列表项 |
4 | console.log("点击了列表项：" + that[res.tapIndex]) |
5 | }, |
6 | fail: function (res) { }, |
7 | complete:function(res){ } |
8 | }) |
四、自定义弹框modal控件
1 | <modal hidden="{{hiddenmodalput}}" title="完善资料" confirm-text="提交" cancel-text="取消" bindcancel="cancelM" bindconfirm="confirmM"> |
2 | <input bindinput='iName' type='text' placeholder="请输入姓名..." auto-focus/> |
3 | <input bindinput='iPhoneNum' type='number' placeholder="请输入手机号码..." /> |
4 | </modal> |
01 | data: { |
02 | hiddenmodalput:false, |
03 | name:"", |
04 | phoneNum:'', |
05 | }, |
06 | cancelM:function(e){ |
07 | this.setData({ |
08 | hiddenmodalput: true, |
09 | }) |
10 | }, |
11 |
12 | confirmM: function (e) { |
13 | console.log("姓名：" + this.data.name + " 电话：" + this.data.phoneNum); |
14 | }, |
15 |
16 | iName: function (e) { |
17 | this.setData({ |
18 | name:e.detail.value |
19 | }) |
20 | }, |
21 | iPhoneNum: function (e) { |
22 | this.setData({ |
23 | phoneNum: e.detail.value |
24 | }) |
25 | }, |
点击取消后弹框隐藏
点击提交后打印日志如下：
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
