小程序中带图片模态的实现

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

先来看看wx.showModal的用法：

wx.showModal({

content:'提示内容。。。',

confirmText:'确定',

confirmColor:'#1677d2',

cancelText:'取消',

cancelColor:'#999',

success:function(res) {

if(res.confirm) {

console.log('用户点击确定按钮');

}else if(res.cancel) {

console.log('用户点击取消按钮');

}

}

})

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

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

wxml:

js:

modal: {

isShow:false,// 图文弹框是否显示

title:'提示',// 标题

desc:'提示内容',// 内容

src:'',// 图片地址必填如果没有图片请直接使用wx.showModal

ok:'确定',// 确定按钮文本

cancel:'',// 取消按钮文本

}

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

效果截图如下：

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

move:function(e) {