微信小程序帶圖片彈窗簡單實現(xiàn)

怎樣實現(xiàn)一個帶圖片顯示的模態(tài)視圖彈窗呢？有時候我們的確有這個需求，自己實現(xiàn)？不不不，哪有官方的方便！

下面我來介紹一種使用官方組件就能實現(xiàn)的方法：

首先找到官方文檔：?顯示模態(tài)彈窗的API wx.showModal(OBJECT) 

wx.showModal參數(shù)介紹

發(fā)現(xiàn)并沒有設(shè)置圖片的參數(shù)，但是這是一個API，但是組件呢？我并沒有在官方文檔中找到，但是經(jīng)過嘗試發(fā)現(xiàn)是可以顯示一個模態(tài)彈窗的，即：

1. wx.showModal({
2. title: '提示',
3. content: '這是一個模態(tài)彈窗',
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. 這是一個模態(tài)彈窗
3. </modal>

但是是否隱藏，確認以及取消的回調(diào)都需要自己手動綁定至js進行控制，效果還是一樣的

普通模態(tài)彈窗  下面我們給他加上圖片：

//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. * 頁面的初始數(shù)據(jù)
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. })

帶圖片模態(tài)彈窗  我們還可以定制圖片大小：

wxss: 代碼

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

這樣子的話其實大家就明白了，只是一個容器，大家可以盡情的發(fā)揮想象去定制，既不用完全自己去實現(xiàn)一個自定義模態(tài)彈窗視圖，又可以擺脫官方wx.showModal的簡陋