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

作者: 韦弦Zhy | 来源:发表于2018-06-25 15:58 被阅读356次
怎样实现一个带图片显示的模态视图弹窗呢?有时候我们的确有这个需求,自己实现?不不不,哪有官方的方便!
使用官方组件实现图片模态弹窗

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

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

效果图如下:


小伙伴们可以随意定制了

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

相关文章

网友评论

  • 396fd8ba15d9:modal
    即将废弃,请使用 API wx.showModal
    396fd8ba15d9:@韦弦Zhy :+1:
    韦弦Zhy:已更新文章,写了个简单的可带图片Modal ---> https://github.com/weixianlove/zy-modal
    韦弦Zhy:哦。。。好吧,那还是要自定义一个去
  • vobear:这个modal组件,写了就能是模态?不错,长见识了
    vobear:@韦弦Zhy 哈哈 可以的,之前项目遇到自定义模态都是自己写,这个方便多了,节约了好多时间。
    韦弦Zhy:@wxx_少侠 官方文档没有,我也是试了之后才知道:smile:

本文标题:微信小程序带图片弹窗简单实现

本文链接:https://www.haomeiwen.com/subject/eceyyftx.html