怎樣實(shí)現(xiàn)一個(gè)帶圖片顯示的模態(tài)視圖彈窗呢乾蛤？有時(shí)候我們的確有這個(gè)需求邑滨，自己實(shí)現(xiàn)日缨？不不不，哪有官方的方便掖看！

使用官方組件實(shí)現(xiàn)圖片模態(tài)彈窗

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

(PS:最近發(fā)現(xiàn)一個(gè)問題匣距，如果頁面內(nèi)有textarea時(shí)面哥，textarea的層級會比蒙版視圖高，并且無法修改毅待，做了一個(gè)比較笨的解決方案：小程序textarea層級問題)

(PS:呃呃呃尚卫，聽說官方的modal組件即將廢棄，所以另寫了一個(gè)可帶圖片彈窗modal組件尸红，需要可以自取)

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

wx.showModal參數(shù)介紹

wx.showModal({
  title: '提示',
  content: '這是一個(gè)模態(tài)彈窗',
  success: function(res) {
    if (res.confirm) {
      console.log('用戶點(diǎn)擊確定')
    } else if (res.cancel) {
      console.log('用戶點(diǎn)擊取消')
    }
  }
})

可以改寫為：

<modal title='提示' hidden="{{modalHidden}}" bindcancel='modalCancel' bindConfirm='modalConfirm'>
    這是一個(gè)模態(tài)彈窗
</modal>

其中按鈕標(biāo)題可使用comfirmText="新名字"設(shè)置,但是發(fā)現(xiàn)顏色好像無法自定義盅蝗。鳖链。。找到方法的小伙伴們望告知风科。

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

普通模態(tài)彈窗

下面我們給他加上圖片：

//wxml: 代碼如下

<view class='container'>

  <button class='button' bindtap='buttonTap' type='primary'>顯示彈窗</button>

  <modal title="我是標(biāo)題" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel">
    <view>
      <image class="image" src="../images/image.jpg" mode='aspectFill'></image>
    </view>
    //需要換行的話直接添加view標(biāo)簽
    <view>You say that you love rain,</view>
    <view>but you open your umbrella when it rains...</view>
    You say that you love the sun, 
    but you find a shadow spot when the sun shines... 
    You say that you love the wind, 
    But you close your windows when wind blows... 
    This is why I am afraid; You say that you love me too...
  </modal>

</view>

//js: 代碼如下
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    modalHidden: true
  },

  /**
   * 顯示彈窗
   */
  buttonTap: function() {
    this.setData({
      modalHidden: false
    })
  },

  /**
   * 點(diǎn)擊取消
   */
  modalCandel: function() {
    // do something
    this.setData({
      modalHidden: true
    })
  },

  /**
   *  點(diǎn)擊確認(rèn)
   */
  modalConfirm: function() {
    // do something
    this.setData({
      modalHidden: true
    })
  }
})

效果圖如下：

帶圖片模態(tài)彈窗

我們還可以定制圖片大性裟隆：

wxss: 代碼
.image {
  width: 150rpx;
  height: 120rpx;
  margin: 10rpx 20rpx 0rpx 0rpx;
  float: left;
}

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

效果圖如下：

小伙伴們可以隨意定制了

GitHub 可帶圖片彈窗modal組件
圖片和詩句我在這抄的 那些高逼格又好玩的詩玖姑，賭你沒見過

賞我一個(gè)贊吧~~~