小程序中带图片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. },

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