微信小程序带图片弹窗如何实现

本篇内容主要讲解“微信小程序带图片弹窗如何实现 ”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序带图片弹窗如何实现 ”吧!

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

首先找到官方文档：显示模态弹窗的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('用户点击取消')}}})

可以改写为：

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

但是是否隐藏，确认以及取消的回调都需要自己手动绑定至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 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的简陋

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