小程序踩坑日志（二）--modal的使用

最新推荐文章于 2024-02-21 21:46:33 发布
最新推荐文章于 2024-02-21 21:46:33 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： 网络学习日志 JavaScript HTML 文章标签： 小程序 微信 modal 组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/marko_zheng/article/details/79140957
版权
本文是小程序踩坑日志的第二篇，重点探讨了小程序中modal组件的使用。modal作为常见的弹出提示组件，常用于展示信息提示，如退出应用、清除缓存或修改资料等场景。文章详细介绍了modal的常用属性及其在实际开发中的应用。
摘要由CSDN通过智能技术生成

小程序踩坑日志（二）

小程序弹出框modal的使用

modal弹出框经常用在提示一些信息，比如退出应用，清除缓存，修改资料。

常用属性
属性名 默认值 说明
title 标题
hidden false 是否隐藏整个弹窗
no-cancel false 是否隐藏cancel按钮
confirm-text 确定 confirm按钮文字
cancel-text 取消 cancel按钮文字
bindconfirm 点击确认触发的回调
bindcancel 点击取消以及遮罩层触发的回调

index.wxml

<!--监听button点击事件-->
<button bindtap="listenerButton"
最低0.47元/天 解锁文章
Markov Zheng
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序 html modal,在微信小程序中如何使用modal组件弹出对话框
weixin_39542889的博客
06-04 323
这篇文章主要介绍了微信小程序使用modal组件弹出对话框功能,结合实例形式分析了微信小程序model组件相关属性及事件响应操作技巧,需要的朋友可以参考下本文实例讲述了微信小程序使用modal组件弹出对话框功能。分享给大家供大家参考，具体如下：关键代码①、index.wxml提示：{{tip}}点击我弹出modal对话框您好，我是modal对话框②、index.jsPage({data:{// te...
vuex - modal的实现 =>从入门到放弃（二）
Zhooson的博客
07-19 1323
vuex - modal的实现 =>从入门到放弃（二）
【微信小程序】之弹框modal
梦和远方的博客
04-25 5126
官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}"> <modal title="{{dialog.tit...
小程序的三种弹框showToast、showModal、showLoading
文龙刚的博客
12-16 6565
小程序的三种弹框showToast、showModal、showLoading
TS封装小程序wx.showModal弹窗及调用
core_song的博客
09-15 1923
ts封装调用微信小程序弹窗wx.showModal，减少代码量，方便调用。
小程序-弹窗-Modal.rar
11-26
在微信小程序开发中，弹窗（Modal）是一个非常常见的组件，用于向用户展示重要的提示信息或者需要用户进行确认的操作。本资源"小程序-弹窗-Modal.rar"显然包含了一个关于如何在小程序中实现Modal弹窗的示例或教程。...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
react-native-modal-translucent：在Android上删除Modal的StatusBar背景
02-05
npm install react-native-modal-translucent --save # or yarn add react-native-modal-translucent 如果您的RN版本低于0.60，则需要手动链接。 react-native link react-native-modal-translucent 现在运行该...
React-Native 组件之 Modal的使用详解
08-29
React-Native 组件之 Modal 的使用详解 Modal 组件是 React-Native 中一个非常重要的组件，它可以用来覆盖包含 React Native 根视图的原生视图（如 UIViewController，Activity），用它可以实现遮罩的效果。在实际...
flask-admin-modal
05-18
例如，针对此问题，使用Bootstrap模态弹出窗口更新Flask-Admin批处理操作中选择的多个记录。 安装 git clone https://github.com/pjcunningham/flask-admin-modal.git cd flask-admin-modal # (optional, create a ...
微信小程序 showModal 自定义showModal.zip
09-25
微信小程序 showModal 自定义showModal.zip
浅析微信小程序modal弹窗关闭默认会执行cancel问题
10-16
主要介绍了小程序modal弹窗关闭默认会执行cancel方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序wx.showModal模态对话框中content换行
peachban的博客
10-11 2507
【代码】微信小程序wx.showModal模态对话框中content换行。首先wx.showModal()的content是不支持html代码块的。那么怎么在content中换行呢？ 解决办法： 。注意：微信开发者工具上并不会换行只是会有空格，但是实际运行手机上是有换行效果的！如果想要在content里面使用变量，就要使用模板字符串。
微信小程序模拟wx.showModal封装弹框组件
m0_71349739的博客
01-04 1124
【代码】微信小程序模拟wx.showModal封装弹框组件。
微信小程序 --- 通用模块封装（showToast，showModal ，本地存储）
最新发布
每天都要努力学习哦~~
02-21 2652
在小程序中，经常需要将一些数据存储到本地，方便多个页面的读取使用，例如：将用户的登录状态、用户的个人信息存储到本地。如果直接使用这些 API，会比较麻烦，通常情况下，我们需要对本地存储的方法进行封装。同时，我们在后续还会进行网络通用模块的封装，如果直接进行封装难度比较大，在进行项目开发的时候，我们经常的会频繁的使用到一些 API，进行通过模块的封装，也是为后续 [网络请求封装] 做铺垫。，会导致代码很冗余，为了减少了代码冗余，我们需要将这些。可以看到封装后方法，极大简化 API 的调用，
微信小程序自定义全局组件showModal
dreamimport的博客
02-20 1129
开发过程中微信提供的showmodal样式不符合ui风格，又不想写成组件用的页面都引入，就考虑模拟showmodal写一个自定义的弹框组件。三，把这个组件挂载到app的实例中在utils文件夹中新建nav-modal.js文件。组件配置好之后，我们就需要引入eventBus 来实现数据和事件的监听。目前没有找到可以在全局挂载之后，页面就不需要引入的办法。六，在app.json文件中引入navModal组件。四，把这两个文件在app.js中引入。五，使用，在需要使用的地方调用。七，在需要的页面底部引入组件。
微信小程序showModel使用注意
小牧在一直在学习,在前进的道路上大家一起学习，进步。
04-25 3357
正确使用如下 wx.showModal({ title: '删除图片', content: '确定要删除该图片？', showCancel: true,//是否显示取消按钮 cancelText: "否",//默认是“取消” cancelColor: 'skyblue',//取消文字的颜色 confirmText: "是",//...
微信小程序设置文本左对齐居中对齐右对齐setTextAlign的使用说明
热门推荐
php全栈程序员，小李子9479。编程培训，提供产品级插件，
06-18 4万+
微信官方说明文档如下。特别注意：对齐方式的基准点，是以整个画布的宽度的一半的中心轴为基准线。左对齐：即文本左侧贴向中心y轴。居中对齐：即文本以中心y轴对齐。右对齐：即文本右侧贴向中心轴y。const ctx = wx.createCanvasContext('myCanvas') ctx.setStrokeStyle('red') ctx.moveTo(150, 20) ctx.lineTo(1...
微信小程序弹窗提示：wx.showToast、wx.showModal、wx.showLoading的使用场景与实现
张修宇的博客
04-13 1万+
1、wx.showToast 使用场景：常规的提示，没有确定和取消按钮。 例： 属性： title：提示的内容 icon：显示的图标，合法值有success、error、loading、none image：自定义图标的本地路径，优先级高于icon duration：提示的延迟时间 mask：是否显示透明蒙层，防止触摸穿透 success：API调用成功后的回调函数 fail：API调用失败后的回调函数 complete：API调用结束的回调函数（无论成功与否都会执行） 实现：
data-hover_modal 和data-click_modal使用例子
05-31
下面是使用例子： 1. 使用 "data-hover_modal" 属性显示悬停模态框： ```html <!-- 图片 --> <img src="example.jpg" data-hover_modal="#image-modal"> <!-- 模态框 --> <div id="image-modal"> <img src="example.jpg"> <p>这是一张图片的详细信息。</p> </div> ``` 在这个例子中，当鼠标悬停在图片上时，会显示 ID 为 "image-modal" 的模态框，里面包含图片的详细信息。 2. 使用 "data-click_modal" 属性显示点击模态框： ```html <!-- 按钮 --> <button data-click_modal="#confirm-modal">确认</button> <!-- 模态框 --> <div id="confirm-modal"> <p>您确定要执行此操作吗？</p> <button>是</button> <button>否</button> </div> ``` 在这个例子中，当用户点击 "确认" 按钮时，会显示 ID 为 "confirm-modal" 的模态框，让用户确认操作。模态框中包含 "是" 和 "否" 两个按钮，用户可以选择是否执行操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值