【无标题】关于微信小程序modal组件

最新推荐文章于 2025-03-11 11:06:15 发布
原创 最新推荐文章于 2025-03-11 11:06:15 发布 · 443 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序

本文介绍了微信小程序中modal组件的使用，它类似于JavaScript的confirm弹框，但点击取消后不会自动隐藏。通过监听事件并调用相应函数来控制hidden属性以实现弹框的显示与隐藏。

modal类似于javascript中的confirm弹框，默认情况下是一个带有确认取消的弹框，不过点击取消后弹框不会自动隐藏，需要通过触发事件调用函数来控制hidden属性。
官方文档：
在这里插入图片描述
wxml代码: <modal hidden="{ {hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{ {nocancel}}"> 这是对话框的内容。 </modal>
js代码：

Page({
   
   
    data:{
   
   
        hidden:false,
最低0.47元/天 解锁文章
networmrlc
关注
微信小程序之封装带输入框的modal组件
MFMLN~ 星辰大海
08-05 2348
由于原生小程序自带modal不可输入，自己又不想因为一个可输入modal去特地引用一个ui框架，而且ui框架的组件风格并不一定和自己的项目一致，所以最后想最好的方法就自己封装两个，比较简单可供参考，之后需要用到类似的就可直接引用或在其基础上进行改动，方便多了。 目录组件一：组件二 组件一： <!-- wxml 1.mask是遮罩层，防止弹窗时用户点击其他处，modalShow控制整个组件的显隐； 2.modal是带输入框的modal容器 2-1.getValue事件 获取输入值 2-2
微信小程序使用modal组件弹出对话框功能示例
08-28
微信小程序使用modal组件弹出对话框功能示例 微信小程序使用modal组件...* 微信小程序modal组件的事件响应 * 微信小程序modal组件的属性介绍 * 微信小程序弹出对话框的实现方法 * 微信小程序开发中modal组件的应用场景
微信小程序 封装模态框modal组件（用法看描述中的博客）
02-28
微信小程序 自定义封装模态框modal组件，可以上下左右四个方向弹出；用法博客：https://blog.youkuaiyun.com/lianzhang861/article/details/88013556
微信小程序 modal弹框组件详解
09-01
主要介绍了微信小程序 modal弹框组件详解的相关资料,并附简单实例,需要的朋友可以参考下
微信小程序之----弹框组件modal
Emperor_Y的博客
03-06 7786
wxml:&lt;modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}"&gt; 这是对话框的
微信小程序把玩（二十三）modal组件
热门推荐
FUCK
09-26 2万+
modal弹出框常用在提示一些信息比如：退出应用，清楚缓存，修改资料提交时一些提示等等。常用属性：wxml<!--监听button点击事件--> <button bindtap="listenerButton" type="primary">弹出modal</button><!--弹出框--> <modal title="退出应用" hidden="{{hiddenModal}}
微信小程序 modal组件详细介绍
01-19
modal弹出框常用在提示一些信息比如：退出应用，清楚缓存，修改资料提交时一些提示等等。 常用属性： wxml <!--监听button点击事件--> <button bindtap=listenerButton type=primary>弹出modal</...
微信小程序 -实现自定义弹窗组件(modal模态框)
Jiaberrr的博客
09-09 2873
微信小程序自带的弹窗是wx.showModal，但是我发现它扩展能力有限，并不能满足自定义的需求，所以用 css + js封装了一个弹窗组件，效果图如下，附源码。
微信小程序 自定义封装模态框modal组件
lianzhang861的博客
02-28 5446
小程序的设计没法用第三方框架包，而他自己也没有好用的模态框，只有几个基本弹出框，无法满足业务需求，所以决定自己封装一个模态框组件。 此组件设计了从上下左右四个方向弹出，目前只是测试版本： 1.设计思路 传统的模态框就是有个div然后用平滑过渡动画使它弹出。 首先需要考虑动画的选择，由于小程序中js无法控制dom，也就无法控制css，所以用@frame的方式做动画不可取，因为无法给css...
微信小程序弹窗组件Modal实现指南
weixin_30591519的博客
03-11 2667
本文还有配套的精品资源，点击获取 简介：微信小程序中的Modal弹窗组件用于向用户展示重要提示或获取用户确认。本资源包含 Modal 弹窗的实现示例和教程，涵盖了 Modal 的定义、 wx.showModal API 的使用方法、参数详解、样式自定义、应用场景及注意事项，帮助开发者在小程序中实现交互性好的弹窗。 1. 微信小程序中Modal的定义和...
微信小程序 html modal,微信小程序 modal组件详细介绍
weixin_33218985的博客
06-04 1134
这篇文章主要介绍了微信小程序 modal组件详细介绍的相关资料,需要的朋友可以参考下modal弹出框常用在提示一些信息比如：退出应用，清楚缓存，修改资料提交时一些提示等等。常用属性：wxml弹出modaltitle="退出应用"hidden="{{hiddenModal}}"confirm-text="再看看"cancel-text="退出"bindconfirm="listenerConfirm...
微信小程序自定义Modal弹框
lluohuih的专栏
05-11 2637
一、创建组件 1、在根目录下自定义一个components文件夹，用来存放自定义的组件。 2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。 3、在指定组件的文件夹中右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true，将其声明为一个组件。 下面开始例子： 1、组件页面 index.wxml <!-- 模态框 --> <!-- 遮罩层 --> <view class="components-mod
微信小程序组件化开发：自定义一个modal弹出窗（Dialog对话框）
2401_84132357的博客
04-06 2300
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的Android开发中高级必知必会核心笔记，共计2968页PDF、58w字，囊括Android开发648个知识点，我把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。
微信小程序 自定义modal弹窗组件
AI小美好
12-25 2万+
微信小程序开发中官方自带的wx.showModal API有时候并不能满足我们的弹窗效果，所以往往需要自定义modal组件。下面我们进行一个自定义modal弹窗组件的开发，并进行组件的引用，组件可自定义底部是一个还是两个按钮。效果如下。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181225171901747.png?x-oss-proc...
微信小程序自定义组件——模态框 Modal
JaimeCheng的博客
02-21 4271
系列文章：微信小程序自定义组件——底部菜单栏 ActionSheet 之所以写这个自定义modal组件，和自定义ActionSheet一样，主要是用于一些开放能力。有些开放能力必须绑定在button上，比如用户授权，这个需求很常见，但是小程序现在已经不支持主动弹出授权框了，所以我们会想先弹出modal用户点击确定再来弹出授权框，小程序原生的Modal确定按钮无法实现，故此组件应运而生。该Modal...
微信小程序自定义modal模态框
czp555的博客
05-17 1276
1.目录结构 2.index.json { "component": true } 3.index.wxml <view wx:if='{{showModal}}'> <view class='mask_layer' /> <view class='modal_box'> <view class="title">{{title}}</view> <view class='content.
微信小程序之model弹框
TC_DESpipi的博客
09-03 1864
【代码】微信小程序之model弹框。
微信小程序modal组件
最新发布
07-29
### 微信小程序中模态框组件（Modal）的使用方法和开发指南 微信小程序提供了内置的模态框组件 `wx.showModal`，用于在用户操作时弹出一个模态对话框，提示用户进行确认或取消操作。该组件具有简洁的调用方式，并且支持自定义内容和样式。 #### 基本使用方法 可以通过 `wx.showModal` 方法调用模态框，传入必要的参数，例如标题、内容、确认和取消按钮的文本等。以下是一个简单的代码示例： ```javascript wx.showModal({ title: '提示', content: '确定要执行此操作吗？', showCancel: true, cancelText: '取消', confirmText: '确定', success(res) { if (res.confirm) { console.log('用户点击了确定'); } else if (res.cancel) { console.log('用户点击了取消'); } } }); ``` - `title`：设置模态框的标题。 - `content`：设置模态框的内容。 - `showCancel`：是否显示取消按钮，默认为 `true`。 - `cancelText`：取消按钮的文字。 - `confirmText`：确认按钮的文字。 - `success`：用户点击按钮后的回调函数，可以判断用户点击的是确认还是取消。 #### 自定义模态框样式 虽然 `wx.showModal` 提供了基本的样式，但在某些情况下可能需要自定义模态框的外观。此时可以通过自定义组件实现更灵活的样式和交互效果。以下是一个自定义模态框的实现思路： 1. **WXML 结构** 创建一个自定义模态框的结构，包括标题、内容、确认和取消按钮。 ```html <view wx:if="{{isModalVisible}}" class="modal-mask"> <view class="modal-container"> <view class="modal-header">提示</view> <view class="modal-content">确定要执行此操作吗？</view> <view class="modal-footer"> <button class="modal-btn cancel-btn" bindtap="onCancel">取消</button> <button class="modal-btn confirm-btn" bindtap="onConfirm">确定</button> </view> </view> </view> ``` 2. **WXSS 样式** 自定义模态框的样式，包括背景遮罩层、内容区域、按钮样式等。 ```css .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .modal-container { background-color: #fff; width: 80%; border-radius: 8rpx; overflow: hidden; } .modal-header { padding: 20rpx; font-size: 18px; font-weight: bold; } .modal-content { padding: 20rpx; font-size: 16px; color: #666; } .modal-footer { display: flex; justify-content: flex-end; } .modal-btn { margin: 10rpx; font-size: 14px; } .cancel-btn { color: #999; } .confirm-btn { color: #007AFF; } ``` 3. **JavaScript 逻辑** 控制模态框的显示和隐藏，并处理用户点击事件。 ```javascript Page({ data: { isModalVisible: false }, showModal() { this.setData({ isModalVisible: true }); }, onCancel() { this.setData({ isModalVisible: false }); console.log('用户点击了取消'); }, onConfirm() { this.setData({ isModalVisible: false }); console.log('用户点击了确定'); } }); ``` #### 注意事项 - **用户体验**：确保模态框的提示信息清晰明了，避免过多的弹窗干扰用户。 - **性能优化**：如果模态框内容较为复杂，建议延迟加载部分内容以提高性能。 - **兼容性**：在不同设备上测试模态框的显示效果，确保其在各种屏幕尺寸下都能正常显示[^1]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值