Shulou(Shulou.com)06/01 Report--

This article mainly explains "How to realize Weixin Mini Programs (Mini) with picture pop-up window." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn how to realize "Weixin Mini Programs (Mini) with picture pop-up window"!

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

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

wx.showModal参数介绍

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

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

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

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

//wxml: 代码如下

显示弹窗 //需要换行的话直接添加view标签You say that you love rain,but you open your umbrella when it rains...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... //js: 代码如下

Page({ /*** 页面的初始数据*/data: {modalHidden: true}, /*** 显示弹窗*/buttonTap: function() {this.setData({modalHidden: false})}, /*** 点击取消*/modalCandel: function() {// do somethingthis.setData({modalHidden: true})}, /*** 点击确认*/modalConfirm: function() {// do somethingthis.setData({modalHidden: true})}})带图片模态弹窗 我们还可以定制图片大小：

wxss: 代码

.image {width: 150rpx;height: 120rpx;margin: 10rpx 20rpx 0rpx 0rpx;float: left;}这样子的话其实大家就明白了，只是一个容器，大家可以尽情的发挥想象去定制，既不用完全自己去实现一个自定义模态弹窗视图，又可以摆脱官方wx.showModal的简陋

到此，相信大家对"微信小程序带图片弹窗如何实现 "有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.