E企盈营销工具技术服务商 热线:4006-838-530

【微信小程序】小程序中的各种弹窗API

E企盈直播平台营销卖货系统

前言:小程序中提供了很多种快捷方便的弹窗API供开发者使用,例如wx.showToast,wx.showModal,wx.showActionSheet,wx.showLoading还有wxml中的loading标签。 一、直接上代码<!– test.wxml –><view class=”content”>    <button bindtap=”popSuccessTest”>成功提示弹窗</button>    <button bindtap=”popMaskTest”>带透明蒙层的弹窗</button>    <button bindtap=”popTest”>纯文字弹窗</button>    <button bindtap=”popCustomIcon”>自定义图标</button>    <button bindtap=”popConfirm”>confirm的弹窗</button>    <button bindtap=”popLoading”>加载弹窗</button>    <button bindtap=”popSelect”>选择框弹窗</button></view>//test.jsPage({  popSuccessTest: function () {    wx.showToast({      title: ‘成功提示弹窗’,      icon: ”,     //默认值是success,就算没有icon这个值,就算有其他值最终也显示success      duration: 2000,      //停留时间    })  },  popMaskTest: function () {    wx.showToast({      title: ‘带蒙层的弹窗’,           duration: 2000,          mask:true    //是否有透明蒙层,默认为false                    //如果有透明蒙层,弹窗的期间不能点击文档内容     })  },  popTest: function(){    wx.showToast({      title: ‘纯文字弹窗’,      icon: ‘none’,    //如果要纯文本,不要icon,将值设为’none’      duration: 2000         })    },  popCustomIcon: function () {    wx.showToast({      title: ‘自定义图标弹窗’,      image: ‘../../static/image/icon.png’,  //image的优先级会高于icon      duration: 2000         })  },  popConfirm: function(){    wx.showModal({      title: ‘confirm的弹窗’,      content: ‘确认要删除该项吗?’,      success: function (res) {        if (res.confirm) {            console.log(‘点击确认回调’)        } else {             console.log(‘点击取消回调’)        }      }    })  },  popLoading: function(){    wx.showLoading({      title:’加载中…’    });  },  popSelect: function(){    wx.showActionSheet({      itemList: [‘A’, ‘B’, ‘C’],      success: function (res) {        console.log(res);      }    })  }});实现效果:   二、重点解析①、wx.showToast中比较重要的属性 title: ‘弹窗文字内容’,icon: 弹窗图标默认值是success,当没有这个属性时,或者当值为”,或者为其他值时(设置了error,warning都无效)都最终为success。如果要纯文本,不要icon,将值设为’none’image: 自定义图标,image的优先级会高于iconduration: 弹窗停留时间,mask: 是否有透明蒙层,默认为false ,如果有透明蒙层,弹窗的期间不能点击弹窗后面的文档内容 ②、wx.showLoading注意点使用wx.showLoading触发的弹窗,需要用wx.hideLoading()来关闭。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 【微信小程序】小程序中的各种弹窗API
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏