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

韦弦zhy

发布于 2018-09-11 12:47:16

6.7K1

发布于 2018-09-11 12:47:16

文章被收录于专栏：韦弦的偶尔分享

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

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

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

(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的简陋

效果图如下：

小伙伴们可以随意定制了

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.06.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

微信

小程序

官方文档

api

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度