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

使用官方组件实现图片模态弹窗

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

(PS:最近发现一个问题，如果页面内有textarea时，textarea的层级会比蒙版视图高，并且无法修改，做了一个比较笨的解决方案：小程序textarea层级问题)

(PS:呃呃呃，听说官方的modal组件即将废弃，所以另写了一个可带图片弹窗modal组件，需要可以自取)

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

wx.showModal参数介绍

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

wx.showModal({  title: '提示',  content: '这是一个模态弹窗',  success: function(res) {    if (res.confirm) {      console.log('用户点击确定')    } else if (res.cancel) {      console.log('用户点击取消')    }  }})

可以改写为：

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

其中按钮标题可使用comfirmText="新名字"设置,但是发现颜色好像无法自定义。。。找到方法的小伙伴们望告知。

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

普通模态弹窗

下面我们给他加上图片：

//wxml: 代码如下<view class='container'>  <button class='button' bindtap='buttonTap' type='primary'>显示弹窗</button>  <modal title="我是标题" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel">    <view>      <image class="image" src="../images/image.jpg" mode='aspectFill'></image>    </view>    //需要换行的话直接添加view标签    <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({  /**   * 页面的初始数据   */  data: {    modalHidden: true  },  /**   * 显示弹窗   */  buttonTap: function() {    this.setData({      modalHidden: false    })  },  /**   * 点击取消   */  modalCandel: function() {    // do something    this.setData({      modalHidden: true    })  },  /**   *  点击确认   */  modalConfirm: function() {    // do something    this.setData({      modalHidden: true    })  }})

效果图如下：

带图片模态弹窗

我们还可以定制图片大小：

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

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

效果图如下：

小伙伴们可以随意定制了

图片和诗句我在这抄的 那些高逼格又好玩的诗，赌你没见过

赏我一个赞吧~~~

原著是一个有趣的人,若有侵权,请通知删除