一、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 {
//点击确定
temp.splice(index, 1),
that.setData({
tempFilePaths: temp,
})
}
},
fail: function (res) { },//接口调用失败的回调函数
complete: function (res) { },//接口调用结束的回调函数（调用成功、失败都会执行）
})
1
三、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
})
},
显示效果如下：
点击取消后弹框隐藏
点击提交后打印日志如下：
————————————————
版权声明：本文为CSDN博主「风正吹」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/yingtian648/article/details/80004334
