微信小程序:模态框(弹窗)的实现

效果 

wxml

<!--新增(点击按钮)-->
<image class='img' src="{{add}}" bindtap='add_mode'></image>
<!-- 弹窗 -->
<view class="modal" wx:if="{{showModal}}"><view class="modal-content"><form bindsubmit="add_info"><view class="modal_title">上传文件</view><view class="modal-buttons"><view class="one_btn" bindtap="submit">确认</view><view class="two_btn" bindtap="cancel">取消</view></view></form></view>
</view>

wxss

/* 窗口 */
.modal-content {background-color: white;width: 90%;height: 80%;border-radius: 8rpx;position: relative;
}/* 模态框标题 */
.modal_title {padding: 3%;font-size: 110%;font-weight: bold;
}/* 按钮 */
.modal-buttons {width: 100%;height:7%;display: flex;bottom: 0;position: absolute;font-weight:bold;
}
.one_btn{flex:1;display: flex;align-items: center;justify-content: center;background-color: #4b97e7;border-top: 1rpx solid #4b97e7;color: #fff;border-radius: 0;
}
.two_btn{flex:1;display: flex;align-items: center;justify-content: center;width: 100%;border-top: 1rpx solid #4b97e7;border-radius: 0px;background-color: #fff;color: #4b97e7;
}

js

const app = getApp()
Page({data: {add: app.globalData.icon + 'index/add.png',showModal: false // 控制模态框的显示和隐藏: false,},// 打开上传文件弹窗add_mode(){this.setData({showModal:true})},// 取消弹窗cancel(){this.setData({showModal:false})},//确认弹窗内容submit(){console.log('确认')}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215568.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue中$props、$attrs和$listeners的使用详解

文章目录 透传属性如何禁止“透传属性和事件”多根节点设置透传访问“透传属性和事件” $props、$attrs和$listeners的使用详解 透传属性 透传属性和事件并没有在子组件中用props和emits声明透传属性和事件最常见的如click和class、id、style当子组件只有一个根元素时&#xf…

jOOQ指南中使用的数据库

jOOQ指南中使用的数据库 本指南中使用的数据库将在本节中进行总结和创建 使用Oracle方言来创建 # 创建语言 CREATE TABLE language (id NUMBER(7) NOT NULL PRIMARY KEY,cd CHAR(2) NOT NULL,description VARCHAR2(50) );# 创建作者 CREATE TABLE author (id NUMBER(7) NOT …

mysql:需要准确存储的带小数的数据,要使用DECIMAL类型

需要准确存储的带小数的数据&#xff0c;要使用DECIMAL&#xff0c;特别是涉及金钱类的业务。而不要使用FLOAT或者DOUBLE。 因为DECIMAL是准确值&#xff0c;不会损失精度。 而FLOAT或者DOUBLE是近似值&#xff0c;会损失精度。 https://dev.mysql.com/doc/refman/8.2/en/fixe…

差生文具多系列之最好看的编程字体

&#x1f4e2; 声明&#xff1a; &#x1f344; 大家好&#xff0c;我是风筝 &#x1f30d; 作者主页&#xff1a;【古时的风筝CSDN主页】。 ⚠️ 本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正&#xff0c;不胜感激。 直达博主&#xff1a;「…

数据结构 | Floyd

参考博文&#xff1a; floyd算法 弗洛伊德算法 多源最短路径算法_弗洛伊德算法例题-CSDN博客

【文心一言】AI试用写代码体会:delphi、php

一、前言&#xff1a; 二、让【文心一言】编写一个函数 1. Delphi 语言&#xff08;文心一言的回复&#xff09; 2. php 语言&#xff08;文心一言回复&#xff09; 三、总结 一、前言&#xff1a; 众所周知&#xff0c;chatGPT是可以自动编写程序的&#xff0c;甚至可以运…

MyBatis缓存机制流程分析

前言 在进行分析之前&#xff0c;建议快速浏览之前写的理解MyBatis原理、思想&#xff0c;这样更容易阅读、理解本篇内容。 验证一级缓存 MyBatis的缓存有两级&#xff0c;一级缓存默认开启&#xff0c;二级缓存需要手动开启。 重复读取跑缓存 可以看到&#xff0c;第二次…

OpenAI承认GPT-4变懒,即将发布修复方案提升性能

目录 1OpenAI承认GPT-4变懒&#xff0c;即将发布修复方案提升性能 2一文秒懂人工智能全球近况 1OpenAI承认GPT-4变懒&#xff0c;即将发布修复方案提升性能 **划重点:** 1. &#x1f92f; 用户反馈:GPT-4使用者抱怨OpenAI破坏了体验&#xff0c;称模型几乎“害怕”提供答案。…

Wireshark使用技巧

Wireshark作为网络数据软件&#xff0c;功能强大&#xff0c;本专栏介绍仅为冰山一角&#xff0c;仅仅是一个入门级别的介绍&#xff0c;大部分功能还需要在日常工作中进行挖掘。 总结Wireshark软件的使用技巧如下&#xff1a; 1.合理部署Wireshark的位置&#xff0c;从源头保障…

基于Java SSM框架实现电影售票系统项目【项目源码+论文说明】

基于java的SSM框架实现电影售票系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#…

界面控件DevExpress WPF导航组件,助力升级应用程序用户体验!(下)

DevExpress WPF的Side Navigation&#xff08;侧边导航&#xff09;、TreeView、导航面板组件能帮助开发者在WPF项目中添加Windows样式的资源管理器栏或Outlook NavBar&#xff08;导航栏&#xff09;&#xff0c;DevExpress WPF NavBar和Accordion控件包含了许多开发人员友好的…

rsyslog配置以及原理

rsyslog 日志由程序产生&#xff0c;在内存中产生。通过Rsyslog来将内存中程序产生的日志持久化到硬盘&#xff0c;并且支持udp、tcp等协议来进行不同服务器的日志同步。 /var/log/messages:大多数系统日志信息纪录在此/var/log/secure&#xff1a;安全和身份认证相关的消息和…

HTTP详解

1. web 1.1 web相关概念 软件架构 C /S&#xff1a;客户端/服务器端 需要安装客户端应用 B/S&#xff1a;浏览器/服务器端 不需要安装客户端应用&#xff0c;对于用户来说只需要记住域名访问就可以,高效,客户端零维护 资源分类 静态资源&#xff1a;所有用户访问后&#x…

数据库系统原理与实践 笔记 #12

文章目录 数据库系统原理与实践 笔记 #12事务管理和并发控制与恢复(续)并发控制SQL-92中的并发级别基于锁的协议基于锁的协议的隐患锁的授予封锁协议两阶段封锁协议多粒度粒度层次的例子意向锁类型相容性矩阵多粒度封锁模式基于时间戳的协议基于时间戳协议的正确性基于有效性检…

怎样在PPT中加入音频文件?记好这4个简单操作!

“我要制作一个比较专业的PPT来汇报工作成果&#xff0c;想在PPT里加一段音乐&#xff0c;但是不知道应该如何操作&#xff0c;有没有朋友可以指导一下呢&#xff1f;” PPT作为一种常用的文件形式&#xff0c;很多用户会将其用于工作汇报&#xff0c;期末总结以及各种演讲。在…

HTML---基础

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 一.HTML概述 HTML&#xff08;超文本标记语言&#xff09;是一种用于创建网络页面的标记语言。它以标记的形式编写&#xff0c;该标记描述了文档的结构和内容。HTML文件由一系列标记&#…

六级高频词组2

目录 词组 参考链接 词组 51. arise from&#xff08;be caused by&#xff09; 由…引起。 52. arrange for sb.sth. to do sth. 安排…做… 53. arrive on 到达&#xff1b; arrive at 到达某地&#xff08;小地方&#xff09;&#xff1b;得出&#xff0c;作出&#x…

zookeeper基础内容

文章目录 Zookeeper基础概述数据结构Zookeeper节点操作zookeeper节点操作命令数据模型 znode 结构 zookeeper java客户端ZooKeeper原生APICuratorzkClient对比总结 Zookeeper基础 概述 zookeeper&#xff08;分布式协调服务&#xff09; 本质&#xff1a;小型的文件存储系统监…

寄存器、缓存、内存、硬盘、存储器的理解

https://blog.csdn.net/heixiaolong7/article/details/51226378 只要能存储数据的器件都可以称之为存储器&#xff0c;它的含义覆盖了寄存器&#xff0c;缓存&#xff0c;内存&#xff0c;硬盘。cpu访问快慢的速度依次为 寄存器-> 缓存->内存->硬盘 寄存器是中央处…