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

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

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

首先找到官方文档：?显示模态弹窗的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="https://www.kesion.com/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的简陋