当前位置：首页 > web >正文

微信小程序自定义带图片弹窗

web 2025/7/27 6:25:05

1. 微信小程序自定义带图片弹窗

在这里插入图片描述

1.1. 实现思路

使用官方组件实现图片模态弹窗。
首先找到官方文档：显示模态弹窗的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>

其中按钮标题可使用comfirmText="新名字"设置,但是发现颜色好像无法自定义。。。找到方法的小伙伴们望告知。
但是是否隐藏，确认以及取消的回调都需要自己手动绑定至js进行控制，效果还是一样的。
在这里插入图片描述
这样子的话其实大家就明白了，只是一个容器，大家可以尽情的发挥想象去定制，既不用完全自己去实现一个自定义模态弹窗视图，又可以摆脱官方wx.showModal的简陋。

1.2. 实例

1.2.1. customDialog3.wxml

<view class='container'><button class='button' bindtap='buttonTap' type='primary'>显示弹窗</button><modal title="我是标题" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel"><view class="modal-layput"><image class="modal-image" mode='aspectFill' src="../../image/icon/board-active.png"></image><view>You say that you love rain,</view></view></modal>
</view>

1.2.2. customDialog3.wxss

.modal-layput {display: flex;flex-direction: column;align-items: center;
}
.modal-image {width: 150rpx;height: 120rpx;margin: 10rpx 20rpx 0rpx 0rpx;float: left;
}

1.2.3. customDialog3.js

// pages/customDialog3/customDialog3.js
Page({data: {modalHidden: true},onLoad(options) {},buttonTap(){this.setData({modalHidden: false})},modalConfirm(){this.setData({modalHidden: true})},modalCandel(){this.setData({modalHidden: true})},})