小程序模板网

微信小程序自定义模态弹窗插件

发布时间:2018-04-25 11:07 所属栏目:小程序开发教程

最近在写微信小程序的时候用到了模态弹窗,但是发现微信官方给的wx.showModal(OBJECT)可自定义性还是太少,满足不了某些情况下的需求。

比如,用户点击了蒙层,而不是点击取消按钮,弹窗也会去执行取消事件,并且将弹窗关闭。文档里并没有屏蔽蒙层点击事件的属性,也没有办法通过其他的方式去屏蔽。

所以就写了一个可随意自定义的第三方弹窗插件【wxPopup】

使用方法也很简单,在要调用弹窗的位置使用this.showModel()方法,传入一些参数,就可以将弹窗显示出来。

 

				
  1. this.showModel({
  2. ModelId: 1,
  3. ModelTitle: '标题(2)',
  4. ModelContent: '感谢使用wxPoput自定义模态弹窗,一个可以随意自定义样式的微信小程序弹窗插件。已经开源到GitHub上。'
  5. })

弹窗的取消事件

 

				
  1. //取消事件
  2. ancel: function(e){
  3. if (e.currentTarget.dataset.modelid == 0){
  4. console.log("用户点击了取消(1)")
  5. } else if (e.currentTarget.dataset.modelid == 1){
  6. console.log("用户点击了取消(2)")
  7. }
  8. }

弹窗的确定事件

 

				
  1. //确定事件
  2. confirm: function(e){
  3. if (e.currentTarget.dataset.modelid == 0) {
  4. console.log("用户点击了确定(1)")
  5. } else if (e.currentTarget.dataset.modelid == 1) {
  6. console.log("用户点击了确定(2)")
  7. }
  8. //关闭模态弹窗
  9. this.setData({
  10. isShowModel: false
  11. })
  12. }

可以通过判断e.currentTarget.dataset.modelid执行对应弹窗的事件

弹窗的显示逻辑就是这样,然后样式的话大家可以随意自定义,相信大家可以玩出更多的花样。

最后喜欢这个插件的话就给点个赞呗!



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24071.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询