微信小程序彈窗wx.showModal不支持圖片以及多文本格式

爲index.wxml添加以下圖代碼： (微信小程序 - canvas層級最高問題，如何超越canvas的層級,只能使用cover-view標籤)

<!--index.wxml-->

<button class="show-btn" bindtap="showDialogBtn">彈窗</button>

<!--彈窗-->

<cover-view class="modal-mask" bindtap="hideModal"  wx:if="{{modal.isShow}}"></cover-view>
<cover-view class="modal-dialog" wx:if="{{modal.isShow}}" >
    <cover-view class="modal-title">{{modal.title}}</cover-view>
    <cover-view class="modal-content">
        <cover-image src="{{modal.src}}" class="img-full" style="height:auto;" mode="widthFix"></cover-image>
    </cover-view>
    <cover-view class="modal-footer" wx-if="{{modal.isFooter}}">
        <cover-view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{modal.cancel}}</cover-view>
        <cover-viewew class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{modal.ok}}</cover-viewew>
        </cover-view>
</cover-view>

修改樣式文件index.wxss，樣式代碼以下圖所示：

/index.wxss/

.show-btn {

  margin-top: 100rpx;

  color: #22cc22;

}

.modal-mask {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  background: #000;

  opacity: 0.5;

  overflow: hidden;

  z-index: 9000;

  color: #fff;

}

.modal-dialog {

  width: 540rpx;

  overflow: hidden;

  position: fixed;

  top: 50%;

  left: 0;

  z-index: 9999;

  background: #f9f9f9;

  margin: -180rpx 105rpx;

  border-radius: 36rpx;

}

.modal-title {

  padding-top: 50rpx;

  font-size: 36rpx;

  color: #030303;

  text-align: center;

}

.modal-content {

  padding: 50rpx 32rpx;

}

.modal-input {

  display: flex;

  background: #fff;

  border: 2rpx solid #ddd;

  border-radius: 4rpx;

  font-size: 28rpx;

}

.input {

  width: 100%;

  height: 82rpx;

  font-size: 28rpx;

  line-height: 28rpx;

  padding: 0 20rpx;

  box-sizing: border-box;

  color: #333;

}

input-holder {

  color: #666;

  font-size: 28rpx;

}

.modal-footer {

  display: flex;

  flex-direction: row;

  height: 86rpx;

  border-top: 1px solid #dedede;

  font-size: 34rpx;

  line-height: 86rpx;

}

.btn-cancel {

  width: 50%;

  color: #666;

  text-align: center;

  border-right: 1px solid #dedede;

}

.btn-confirm {

  width: 50%;

  color: #ec5300;

  text-align: center;

}

index.js代碼以下圖所示：

//index.js

//獲取應用實例

var app = getApp()

Page({

  data: {

    showModal: false,

  },

  onLoad: function () {

  },

  /**

   * 彈窗

   */

  showDialogBtn: function () {

    this.setData({

      showModal: true

    })

  },

  /**

   * 彈出框蒙層截斷touchmove事件

   */

  preventTouchMove: function () {

  },

  /**

   * 隱藏模態對話框

   */

  hideModal: function () {

    this.setData({

      showModal: false

    });

  },

  /**

   * 對話框取消按鈕點擊事件

   */

  onCancel: function () {

    this.hideModal();

  },

  /**

   * 對話框確認按鈕點擊事件

   */

  onConfirm: function () {

    this.hideModal();

  }

})

運行，能夠看到wx.showModal修改樣式後的效果

這裏有個要特別注意的地方，就是下面這個方法：

preventTouchMove: function () {    }

爲何是空方法？由於要結合界面wxml看，蒙層view裏有一個事件綁定

catchtouchmove="preventTouchMove"。

這養寫的緣由是阻斷事件向下傳遞，避免在彈窗後還能夠點擊或者滑動蒙層下的界面。

若是不這樣寫的話，若是主界面是一個能夠滾動的界面，想一想看，當彈窗彈出的時候用戶還能夠操做滾動列表。