欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-15 21:34:22
...

一、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){ }
      })

效果图依次如下:
微信小程序 详解弹框wx.showToast、wx.showModal、wx.showActionSheet,modal控件解释及input输入框值的获取
微信小程序 详解弹框wx.showToast、wx.showModal、wx.showActionSheet,modal控件解释及input输入框值的获取
微信小程序 详解弹框wx.showToast、wx.showModal、wx.showActionSheet,modal控件解释及input输入框值的获取

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

显示效果如下:
微信小程序 详解弹框wx.showToast、wx.showModal、wx.showActionSheet,modal控件解释及input输入框值的获取
点击取消后弹框隐藏
点击提交后打印日志如下:
微信小程序 详解弹框wx.showToast、wx.showModal、wx.showActionSheet,modal控件解释及input输入框值的获取

相关标签: 微信小程序弹框