小程序中带图片modal的实现
前言：做小程序经常会遇到弹框提示，大家应该首选wx.showModal，标题、内容、button内容和颜色都可以自己定义，可以说是满足90%的dialog需求。但是，只支持文本内容，没办法插入图片素材。
先来看看wx.showModal的用法：
wx.showModal({
title: '温馨提示',
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:
<!-- 图文弹框 -->
<view class='modal-image-text' wx:if="{{modal.isShow}}">
<view class='modal-mask' bindtap='{{!buttonClicked? "modalClick":""}}'></view>
<view class='modal-content'>
<view class='modal-header'>{{modal.title}}</view>
<view class='modal-body'>
<view>{{modal.desc}}</view>
<image src='{{modal.src}}' mode='widthFix' />
</view>
<view class='modal-footer'>
<view class='modal-btn modal-cancel width50' bindtap='{{!buttonClicked? "modalClick":""}}' data-id='0' wx:if="{{modal.cancel}}">{{modal.cancel}}</view>
<view class='modal-btn modal-ok {{modal.cancel?"width50":""}}' bindtap='{{!buttonClicked? "modalClick":""}}' data-id='1'>{{modal.ok}}</view>
</view>
</view>
</view>js:
modal: {
isShow: false, // 图文弹框是否显示
title: '提示', // 标题
desc: '提示内容', // 内容
src: '', // 图片地址，必填，如果没有图片，请直接使用wx.showModal
ok: '确定', // 确定按钮文本
cancel: '', // 取消按钮文本
}CSS的代码，这里省略了，JS直接控制modal.isShow就可以让弹框显示或者隐藏了~如果你觉得不够酷炫，可以自己添加CSS动画效果。
效果截图如下：
发现个问题：弹出框后，页面仍然可以滑动。如果你不想让页面滑动，可以添加事件catchtouchmove，这样就会默认阻止事件向上冒泡了，上层view的滑动就不生效了，代码：
<view class='modal-image-text' wx:if="{{modal.isShow}}" catchtouchmove="move">move: function (e) {
console.log(222333); // catch绑定的事件不会向上冒泡
},后续有时间，我再把上面代码整理成组件，今天就分享到这儿~
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2017-10-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
