微信小程序带图片弹窗简单实现

怎样实现一个带图片显示的模态视图弹窗呢？有时候我们的确有这个需求，自己实现？不不不，哪有官方的方便！

下面我来介绍一种使用官方组件就能实现的方法：

首先找到官方文档：​显示模态弹窗的API wx.showModal(OBJECT) 

wx.showModal参数介绍

发现并没有设置图片的参数，但是这是一个API，但是组件呢？我并没有在官方文档中找到，但是经过尝试发现是可以显示一个模态弹窗的，即：

1. wx.showModal({
2. title: '提示',
3. content: '这是一个模态弹窗',
4. success: function(res) {
5. if (res.confirm) {
6. console.log('用户点击确定')
7. } else if (res.cancel) {
8. console.log('用户点击取消')
9. }
10. }
11. })

可以改写为：

1. <modal title='提示' hidden="{{modalHidden}}" bindcancel='modalCancel' bindConfirm='modalConfirm'>
2. 这是一个模态弹窗
3. </modal>

但是是否隐藏，确认以及取消的回调都需要自己手动绑定至js进行控制，效果还是一样的

普通模态弹窗  下面我们给他加上图片：

//wxml: 代码如下

1. <view class='container'>
2.  
3. <button class='button' bindtap='buttonTap' type='primary'>显示弹窗</button>
4.  
5. <modal title="我是标题" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel">
6. <view>
7. <image class="image" src="../images/image.jpg" mode='aspectFill'></image>
8. </view>
9. //需要换行的话直接添加view标签
10. <view>You say that you love rain,</view>
11. <view>but you open your umbrella when it rains...</view>
12. You say that you love the sun,
13. but you find a shadow spot when the sun shines...
14. You say that you love the wind,
15. But you close your windows when wind blows...
16. This is why I am afraid; You say that you love me too...
17. </modal>
18.  
19. </view>

//js: 代码如下

1. Page({
2.  
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. modalHidden: true
8. },
9.  
10. /**
11. * 显示弹窗
12. */
13. buttonTap: function() {
14. this.setData({
15. modalHidden: false
16. })
17. },
18.  
19. /**
20. * 点击取消
21. */
22. modalCandel: function() {
23. // do something
24. this.setData({
25. modalHidden: true
26. })
27. },
28.  
29. /**
30. * 点击确认
31. */
32. modalConfirm: function() {
33. // do something
34. this.setData({
35. modalHidden: true
36. })
37. }
38. })

带图片模态弹窗  我们还可以定制图片大小：

wxss: 代码

1. .image {
2. width: 150rpx;
3. height: 120rpx;
4. margin: 10rpx 20rpx 0rpx 0rpx;
5. float: left;
6. }

这样子的话其实大家就明白了，只是一个容器，大家可以尽情的发挥想象去定制，既不用完全自己去实现一个自定义模态弹窗视图，又可以摆脱官方wx.showModal的简陋