模板网首页 > 建站教程 > 微信 >  微信小程序wx.showToast、wx.showModal、wx.showActionSheet、modal示例代码正文

微信小程序wx.showToast、wx.showModal、wx.showActionSheet、modal示例代码

微信小程序对于toast、modal和actionSheet的支持非常好,类型丰富,而且,效果也不错。如果不是特别的需求,用它提供的这些控件就已经足够了。下面是使用示例代码,直接复制过去就能使用,欢迎收藏!

一、吐司提示wx.showToast
wx.showToast({
    title: '失败',//提示文字
    duration:2000,//显示时长
    mask:true,//是否显示透明蒙层,防止触摸穿透,默认:false  
    icon:'success', //图标,支持"success"、"loading"  
    success:function(){ },//接口调用成功
    fail: function () { },  //接口调用失败的回调函数  
    complete: function () { } //接口调用结束的回调函数  
})
效果图如下:

wx.showToast

二、确认对话框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.showModal

三、底部弹出选择框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.showActionSheet

四、自定义弹框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
    })
},
显示效果如下:

modal控件

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

modal控件

0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢