当前位置: 首页 > news >正文

uni-app:实现点击按钮出现底部弹窗(uni.showActionSheet+自定义)

一、通过uni.showActionSheet实现底部选择

效果

 代码

<template><view><button @click="showActionsheet">点击打开弹窗</button></view>
</template><script>
export default {methods: {showActionsheet() {uni.showActionSheet({itemList: ['选项1', '选项2', '选项3'],success: (res) => {console.log('选择了第' + (res.tapIndex + 1) + '个选项');},fail: (err) => {console.log('弹窗取消');}});}}
};
</script>

二、自定义底部弹出窗

效果

 代码

<template><view><button @click="togglePopup">点击打开弹窗</button><view v-if="showPopup" class="popup"><view class="content"><view class="line1"><view>料号编辑</view></view><view class="line2"><view>料号:</view><view>料号名称:</view><view>规格型号:</view><view>单位:</view></view></view><view class="btn-group"><view class="btn_position"><view class="cancel" @click="cancel">取消</view><view class="submit" @click="submit">提交</view></view></view></view><view v-if="showPopup" class="mask" @click="togglePopup"></view></view>
</template><script>export default {data() {return {showPopup: false,};},methods: {togglePopup() {this.showPopup = !this.showPopup;},submit() {this.showPopup = false;},cancel() {this.showPopup = false;}}};
</script><style lang="scss">// 弹窗效果.popup {position: fixed;bottom: 0;left: 0;width: 100%;background-color: #fff;// padding: 20rpx;box-sizing: border-box;z-index: 999;}// 遮罩层.mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 888;}// 弹窗内容.content {.line1 {background-color:#6ea8e7;text-align: center;padding: 20rpx;}.line2 {padding: 20rpx;// border-bottom: 1px solid black;view {margin-bottom: 10rpx;}}}// 按钮样式.btn-group {box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); /* 示例阴影参数,根据需要进行调整 */.btn_position {display: flex;width: 100%;.cancel {width: 50%;text-align: center;padding: 20rpx 0;color: #519fe7;}.submit {width: 50%;background-color: #519fe7;text-align: center;padding: 20rpx 0;color: #fff;}}}
</style>

相关文章:

uni-app:实现点击按钮出现底部弹窗(uni.showActionSheet+自定义)

一、通过uni.showActionSheet实现底部选择 效果 代码 <template><view><button click"showActionsheet">点击打开弹窗</button></view> </template><script> export default {methods: {showActionsheet() {uni.showAct…...

flume系列之:监控zookeeper的flume配置写入节点,新增和删除flume agent节点,通过ansible自动部署和卸载flume agent

flume系列之:监控zookeeper的flume配置写入节点,新增和删除flume agent节点,通过ansible自动部署和卸载flume agent 一、相关技术二、流程梳理三、部署和删除flume agent效果四、监控zookeeper节点五、新增zookeeper节点部署flume agent六、删除zookeeper节点删除flume agen…...

了解以太网通信中的九阳神功 - SOME/IP协议

智能座舱SOME/IP通信 概述SOME/IP基础协议SOME/IP SD协议通信行为流程开机流程关机行为行为时序总结概述 SOME/IP协议是目前国内座舱SOA化应用比较广泛的一种ECU或车辆网络内设备之间交换数据的网络通信协议。它允许不同车辆组件,如发动机控制单元、信息娱乐系统、车身控制模…...

redis List类型命令

在Redis中&#xff0c;List&#xff08;列表&#xff09;是一种有序的、可重复的数据结构&#xff0c;它支持插入、删除和获取元素的操作。以下是一些常见的Redis List类型命令&#xff1a; LPUSH&#xff1a;将一个或多个值从列表的左侧插入。LPUSH key value1 value2 ...其中…...

【博客685】prometheus 出现NaN场景以及如何去除干扰(Not a Number)

prometheus 出现NaN场景以及如何去除干扰(Not a Number) 1、在prometheus中使用NaN来表示无效数值或者结果 场景&#xff1a; 一些监控系统使用 NaN 作为空值或缺失值&#xff0c;但在 Prometheus 中 NaN 只是另一个浮点值。Prometheus 表示缺失数据的方式是让数据缺失。Prom…...

【计算机网络】网络层协议 -- ICMP协议

文章目录 1. ICMP协议简介2. ICMP协议格式3. ping命令4. ping命令与端口号没有关系&#xff01;&#xff01;&#xff01;5. traceroute命令 1. ICMP协议简介 ICMP&#xff08;Internet Control Message Protocol&#xff0c;控制报文协议&#xff09;&#xff0c;用于在IP主机…...

机器学习---facebook的案例学习

import pandas as pd import matplotlib.pyplot as plt import seaborn as sbn from sklearn.model_selection import train_test_split,GridSearchCV from sklearn.preprocessing import StandardScaler from sklearn.neighbors import KNeighborsClassifier # 使用pandas读…...

OpenMMLab MMDetectionV3.1.0-SAM(环境安装、模型测试、训练以及模型后处理工具)

OpenMMLab Playground 概况 当前通用目标检测的研究方向正在朝着大型多模态模型发展。除了图像输入之外&#xff0c;最近的研究成果还结合了文本模式来提高性能。添加文本模态后&#xff0c;通用检测算法的一些非常好的属性开始出现&#xff0c;例如&#xff1a; 可以利用大量…...

ios_base::out和ios::out、ios_base::in和ios::in、ios_base::app和ios::app等之间有什么区别吗?

2023年8月2日&#xff0c;周三晚上 今天我看到了这样的两行代码&#xff1a; std::ofstream file("example.txt", std::ios_base::out);std::ofstream file("example.txt", std::ios::out);这让我产生了几个疑问&#xff1a; 为什么有时候用ios_base::o…...

PostgreSQL 使用SQL

发布主题 设置发布为true 这个语句是针对 PostgreSQL 数据库中的逻辑复制功能中的逻辑发布&#xff08;Logical Publication&#xff09;进行设置的。 PostgreSQL 中&#xff0c;逻辑复制是一种基于逻辑日志的复制方法&#xff0c;允许将数据更改从一个数据库实例复制到另一…...

Shell编程基础(十四)文本三剑客(grep)

文本三剑客&#xff08;grep&#xff09; 使用场景基本使用返回值参数 使用场景 主要用于查找&#xff0c;过滤文本数据&#xff1b;该数据可以来自文件&#xff0c;也可以来自管道流等等。 grep除了原有的实现&#xff0c;后来还出现了以下扩展实现 egrep&#xff1a;支持扩展…...

Linux root用户执行修改密码命令,提示 Permission denied

问题 linux系统中&#xff08;ubuntu20&#xff09;&#xff0c;root用户下执行passwd命令&#xff0c;提示 passwd: Permission denied &#xff0c;如下图&#xff1a; 排查 1.执行 ll /usr/bin/passwd &#xff0c;查看文件权限是否正确&#xff0c;正常情况是 -rwsr-xr…...

Java面向对象学习第三部分

一、Static修饰符 static是静态的意思&#xff0c;基本概念如下&#xff1a; Static分类&#xff1a; 一般我们分类都是按照是否使用static修饰进行分类。分为静态变量&#xff08;类变量&#xff09;、实例变量。 静态变量和实例变量的比较&#xff1a; 比较&#xff0c;…...

python+vue生成条形码码并展示

需求 最近想做一个小工具&#xff0c;大概要实现这样的效果&#xff1a;后端生成条形码后&#xff0c;不保存到服务器&#xff0c;直接返回给前端展示。 大概思路是&#xff0c;通过 python-barcode库 生成条码的字节流&#xff0c;生成字节流后直接编码成base64格式返回给前…...

在线高精地图生成算法调研

1.HDMapNet 整体的网络架构如图所示&#xff0c;最终的Decoder输出三个分支&#xff0c;一个语义分割&#xff0c;一个embedding嵌入分支&#xff0c;一个方向预测。然后通过后处理将这些信息处理成向量化的道路表示。 img2bev的方式之前有IPM&#xff0c;通过假设地面的高度都…...

【干货】商城系统的重要功能特性介绍

电子商务的快速发展&#xff0c;商城系统成为了企业开展线上销售的重要工具。一款功能强大、用户友好的商城系统能够有效提升企业的销售业绩&#xff0c;提供良好的购物体验。下面就商城系统的重要功能特性作一些简单介绍&#xff0c;帮助企业选择合适的系统&#xff0c;打造成…...

MYSQL06高级_为什么使用索引、优缺点、索引的设计、方案、聚簇索引、联合索引、注意事项

文章目录 ①. 为什么使用索引②. 索引及其优缺点③. InnoDb - 索引的设计④. InnoDb中的索引方案⑤. 索引 - 聚簇索引⑥. 索引 - 二级索引⑦. B树索引的注意事项⑧. MyISAM中索引方案 ①. 为什么使用索引 ①. 索引是存储引擎用于快速找到数据记录的一种数据结构,就好比去图书馆…...

LeetCode 130. 被围绕的区域

题目链接&#xff1a;130. 被围绕的区域 题目描述 给你一个 m x n 的矩阵 board &#xff0c;由若干字符 ‘X’ 和 ‘O’ &#xff0c;找到所有被 ‘X’ 围绕的区域&#xff0c;并将这些区域里所有的 ‘O’ 用 ‘X’ 填充。 示例1&#xff1a; 输入&#xff1a;board [[“…...

python中2等于2.0吗,python中【1:2】

本篇文章给大家谈谈python中2等于2.0吗&#xff0c;以及python中【1:2】&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 变量和赋值 Python中的变量不需要声明, 直接定义即可. 会在初始化的时候决定变量的 “类型” 使用 来进行初始化和赋值操作 定义变量时…...

【2023年11月第四版教材】《第2章-信息技术发展(第一部分)》

《第2章-信息技术发展&#xff08;第一部分&#xff09;》 章节说明1 计算机软硬件2 计算机网络2.1 网络的作用范围2.2 OSI模型2.3 广域网协议2.4 网络协议2.5 TCP/IP2.6 软件定义网络&#xff08;SDN&#xff09;2.7 第五代移动通信技术 章节说明 大部分为新增内容&#xff0…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

HTTPS证书一年多少钱?

HTTPS证书作为保障网站数据传输安全的重要工具&#xff0c;成为众多网站运营者的必备选择。然而&#xff0c;面对市场上种类繁多的HTTPS证书&#xff0c;其一年费用究竟是多少&#xff0c;又受哪些因素影响呢&#xff1f; 首先&#xff0c;HTTPS证书通常在PinTrust这样的专业平…...

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...

工厂方法模式和抽象工厂方法模式的battle

1.案例直接上手 在这个案例里面&#xff0c;我们会实现这个普通的工厂方法&#xff0c;并且对比这个普通工厂方法和我们直接创建对象的差别在哪里&#xff0c;为什么需要一个工厂&#xff1a; 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类&#xff1a; 两个发…...