用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

Rolan 2017-11-28 00:27

最近在写微信小程序的时候用到了模态弹窗,但是发现微信官方给的wx.showModal(OBJECT)可自定义性还是太少,满足不了某些情况下的需求。比如,用户点击了蒙层,而不是点击取消按钮,弹窗也会去执行取消事件,并且将弹 ...

最近在写微信小程序的时候用到了模态弹窗,但是发现微信官方给的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执行对应弹窗的事件

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

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

项目地址:https://gitee.com/zhangyubk/wxPoput

鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: IT青年 来自: 码云

相关阅读