小程序模板网

小程序中带图片modal的实现

前言:做小程序经常会遇到弹框提示,大家应该首选wx.showModal,标题、内容、button内容和颜色都可以自己定义,可以说是满足90%的dialog需求。但是,只支持文本内容,没办法插入图片素材。

先来看看wx.showModal的用法:

 

				
  1. wx.showModal({
  2.  
  3. title:'温馨提示',
  4.  
  5. content:'提示内容。。。',
  6.  
  7. confirmText:'确定',
  8.  
  9. confirmColor:'#1677d2',
  10.  
  11. cancelText:'取消',
  12.  
  13. cancelColor:'#999',
  14.  
  15. success:function(res) {
  16.  
  17. if(res.confirm) {
  18.  
  19. console.log('用户点击确定按钮');
  20.  
  21. }else if(res.cancel) {
  22.  
  23. console.log('用户点击取消按钮');
  24.  
  25. }
  26.  
  27. }
  28.  
  29. })

详细API,请查看:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowmodalobject

API中确实没有插入图片素材的参数,因此,只能自己来现实一个图文的modal了~

wxml:

js:

 

				
  1. modal: {
  2.  
  3. isShow:false,// 图文弹框是否显示
  4.  
  5. title:'提示',// 标题
  6.  
  7. desc:'提示内容',// 内容
  8.  
  9. src:'',// 图片地址,必填,如果没有图片,请直接使用wx.showModal
  10.  
  11. ok:'确定',// 确定按钮文本
  12.  
  13. cancel:'',// 取消按钮文本
  14.  
  15. }

CSS的代码,这里省略了,JS直接控制modal.isShow就可以让弹框显示或者隐藏了~如果你觉得不够酷炫,可以自己添加CSS动画效果。

效果截图如下:

发现个问题:弹出框后,页面仍然可以滑动。如果你不想让页面滑动,可以添加事件catchtouchmove,这样就会默认阻止事件向上冒泡了,上层view的滑动就不生效了,代码:

 

				
  1. move:function(e) {
  2.  
  3. console.log(222333);    // catch绑定的事件不会向上冒泡
  4.  
  5. },

后续有时间,我再把上面代码整理成组件,今天就分享到这儿~



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