您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

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

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-06-28 15:24热度:

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

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

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

wx.showModal参数介绍

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

 

  1. wx.showModal({
  2. title: '提示',
  3. content: '这是一个模态弹窗',
  4. success: function(res) {
  5. if (res.confirm) {
  6. console.log('用户点击确定')
  7. } else if (res.cancel) {
  8. console.log('用户点击取消')
  9. }
  10. }
  11. })

可以改写为:

 

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

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

普通模态弹窗  下面我们给他加上图片:

//wxml: 代码如下

 

  1. <view class='container'>
  2.  
  3. <button class='button' bindtap='buttonTap' type='primary'>显示弹窗</button>
  4.  
  5. <modal title="我是标题" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel">
  6. <view>
  7. <image class="image" src="../images/image.jpg" mode='aspectFill'></image>
  8. </view>
  9. //需要换行的话直接添加view标签
  10. <view>You say that you love rain,</view>
  11. <view>but you open your umbrella when it rains...</view>
  12. You say that you love the sun,
  13. but you find a shadow spot when the sun shines...
  14. You say that you love the wind,
  15. But you close your windows when wind blows...
  16. This is why I am afraid; You say that you love me too...
  17. </modal>
  18.  
  19. </view>

//js: 代码如下

 

  1. Page({
  2.  
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. modalHidden: true
  8. },
  9.  
  10. /**
  11. * 显示弹窗
  12. */
  13. buttonTap: function() {
  14. this.setData({
  15. modalHidden: false
  16. })
  17. },
  18.  
  19. /**
  20. * 点击取消
  21. */
  22. modalCandel: function() {
  23. // do something
  24. this.setData({
  25. modalHidden: true
  26. })
  27. },
  28.  
  29. /**
  30. * 点击确认
  31. */
  32. modalConfirm: function() {
  33. // do something
  34. this.setData({
  35. modalHidden: true
  36. })
  37. }
  38. })

效果图如下:

带图片模态弹窗  我们还可以定制图片大小:

wxss: 代码

 

  1. .image {
  2. width: 150rpx;
  3. height: 120rpx;
  4. margin: 10rpx 20rpx 0rpx 0rpx;
  5. float: left;
  6. }

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

效果图如下:

小伙伴们可以随意定制了  图片和诗句我在这抄的 那些高逼格又好玩的诗,赌你没见过.