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

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

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

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

5G">首先找到官方文档:?显示模态弹窗的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="https://www.kesion.com/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的简陋

 

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


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



热门标签
5G 微信小程序 SaaS
上/下篇
  • 拼团小程序商城源码开发

  • 微信小程序调用扫一扫功能如何实现

换一换相关推荐
精选内容
热点精选