微信小程序> 微信小程序详解弹框wx.showToast、wx.showModal、wx.showActionSheet,modal控件解释及input输入框值的获取

微信小程序详解弹框wx.showToast、wx.showModal、wx.showActionSheet,modal控件解释及input输入框值的获取

浏览量:552 时间: 来源:风正吹

一、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) { },//接口调用结束的回调函数(调用成功、失败都会执行)      })

三、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      })   },

显示效果如下:

点击取消后弹框隐藏
点击提交后打印日志如下:

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎