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

如何使用图像显示实现模态视图弹出窗口？有时我们确实有这种需要并且自己实现它吗？不，不，没有官方便利！

让我介绍一种可以使用官方组件实现的方法：

首先找官方文档：显示模态弹出API wx.showModal（OBJECT）

wx.showModal参数简介

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

wx.showModal（{title:'prompt'，内容:'这是一个模态弹出'，成功:函数（res）{if（res.confirm）{console.log（'用户点击OK'）}否则if（res .cancel）{console.log（'用户点击取消'）}}}）

可以改写为：

这是一个模态弹出窗口

但是否隐藏，确认和取消回调需要手动绑定到js来控制，效果仍然相同

普通的模态弹出窗口让我们为他添加一张图片：

//wxml:代码如下

显示弹出窗口//如果需要换行，请直接添加视图标记。你说你喜欢下雨，但下雨时你打开雨伞.你说你喜欢阳光，但是当阳光普照时你会发现一个阴影点。你说你喜欢风，但你关闭了风吹的时候你的窗户.这就是我害怕的原因;你说你也爱我.

//js:代码如下

页面（{/***页面初始数据* /数据: {modalHidden: true}，/***显示弹出窗口*/buttonTap: function（）{this.setData（{modalHidden: false}）}，/* **单击Cancel */modalCandel: function（）{//do somethingthis.setData（{modalHidden: true}）}，/***单击确认*/modalConfirm: function（）{//do somethingthis.setData（{modalHidden 使用图片模式弹出窗口，我们还可以自定义图像大小：

Wxss:代码

.image {width: 150rpx; height: 120rpx; margin: 10rpx 20rpx 0rpx 0rpx; float: left;}

在这种情况下，每个人都会理解，只是一个容器，你可以用你的想象力来定制，你不必完全实现自定义模态弹出视图，你可以摆脱官方wx.showModal陋陋

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。