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中,List(列表)是一种有序的、可重复的数据结构,它支持插入、删除和获取元素的操作。以下是一些常见的Redis List类型命令: LPUSH:将一个或多个值从列表的左侧插入。LPUSH key value1 value2 ...其中…...
【博客685】prometheus 出现NaN场景以及如何去除干扰(Not a Number)
prometheus 出现NaN场景以及如何去除干扰(Not a Number) 1、在prometheus中使用NaN来表示无效数值或者结果 场景: 一些监控系统使用 NaN 作为空值或缺失值,但在 Prometheus 中 NaN 只是另一个浮点值。Prometheus 表示缺失数据的方式是让数据缺失。Prom…...
【计算机网络】网络层协议 -- ICMP协议
文章目录 1. ICMP协议简介2. ICMP协议格式3. ping命令4. ping命令与端口号没有关系!!!5. traceroute命令 1. ICMP协议简介 ICMP(Internet Control Message Protocol,控制报文协议),用于在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 概况 当前通用目标检测的研究方向正在朝着大型多模态模型发展。除了图像输入之外,最近的研究成果还结合了文本模式来提高性能。添加文本模态后,通用检测算法的一些非常好的属性开始出现,例如: 可以利用大量…...
ios_base::out和ios::out、ios_base::in和ios::in、ios_base::app和ios::app等之间有什么区别吗?
2023年8月2日,周三晚上 今天我看到了这样的两行代码: std::ofstream file("example.txt", std::ios_base::out);std::ofstream file("example.txt", std::ios::out);这让我产生了几个疑问: 为什么有时候用ios_base::o…...
PostgreSQL 使用SQL
发布主题 设置发布为true 这个语句是针对 PostgreSQL 数据库中的逻辑复制功能中的逻辑发布(Logical Publication)进行设置的。 PostgreSQL 中,逻辑复制是一种基于逻辑日志的复制方法,允许将数据更改从一个数据库实例复制到另一…...
Shell编程基础(十四)文本三剑客(grep)
文本三剑客(grep) 使用场景基本使用返回值参数 使用场景 主要用于查找,过滤文本数据;该数据可以来自文件,也可以来自管道流等等。 grep除了原有的实现,后来还出现了以下扩展实现 egrep:支持扩展…...
Linux root用户执行修改密码命令,提示 Permission denied
问题 linux系统中(ubuntu20),root用户下执行passwd命令,提示 passwd: Permission denied ,如下图: 排查 1.执行 ll /usr/bin/passwd ,查看文件权限是否正确,正常情况是 -rwsr-xr…...
Java面向对象学习第三部分
一、Static修饰符 static是静态的意思,基本概念如下: Static分类: 一般我们分类都是按照是否使用static修饰进行分类。分为静态变量(类变量)、实例变量。 静态变量和实例变量的比较: 比较,…...
python+vue生成条形码码并展示
需求 最近想做一个小工具,大概要实现这样的效果:后端生成条形码后,不保存到服务器,直接返回给前端展示。 大概思路是,通过 python-barcode库 生成条码的字节流,生成字节流后直接编码成base64格式返回给前…...
在线高精地图生成算法调研
1.HDMapNet 整体的网络架构如图所示,最终的Decoder输出三个分支,一个语义分割,一个embedding嵌入分支,一个方向预测。然后通过后处理将这些信息处理成向量化的道路表示。 img2bev的方式之前有IPM,通过假设地面的高度都…...
【干货】商城系统的重要功能特性介绍
电子商务的快速发展,商城系统成为了企业开展线上销售的重要工具。一款功能强大、用户友好的商城系统能够有效提升企业的销售业绩,提供良好的购物体验。下面就商城系统的重要功能特性作一些简单介绍,帮助企业选择合适的系统,打造成…...
MYSQL06高级_为什么使用索引、优缺点、索引的设计、方案、聚簇索引、联合索引、注意事项
文章目录 ①. 为什么使用索引②. 索引及其优缺点③. InnoDb - 索引的设计④. InnoDb中的索引方案⑤. 索引 - 聚簇索引⑥. 索引 - 二级索引⑦. B树索引的注意事项⑧. MyISAM中索引方案 ①. 为什么使用索引 ①. 索引是存储引擎用于快速找到数据记录的一种数据结构,就好比去图书馆…...
LeetCode 130. 被围绕的区域
题目链接:130. 被围绕的区域 题目描述 给你一个 m x n 的矩阵 board ,由若干字符 ‘X’ 和 ‘O’ ,找到所有被 ‘X’ 围绕的区域,并将这些区域里所有的 ‘O’ 用 ‘X’ 填充。 示例1: 输入:board [[“…...
python中2等于2.0吗,python中【1:2】
本篇文章给大家谈谈python中2等于2.0吗,以及python中【1:2】,希望对各位有所帮助,不要忘了收藏本站喔。 变量和赋值 Python中的变量不需要声明, 直接定义即可. 会在初始化的时候决定变量的 “类型” 使用 来进行初始化和赋值操作 定义变量时…...
【2023年11月第四版教材】《第2章-信息技术发展(第一部分)》
《第2章-信息技术发展(第一部分)》 章节说明1 计算机软硬件2 计算机网络2.1 网络的作用范围2.2 OSI模型2.3 广域网协议2.4 网络协议2.5 TCP/IP2.6 软件定义网络(SDN)2.7 第五代移动通信技术 章节说明 大部分为新增内容࿰…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成,具体方法取决于设备类型(如USB麦克风、3.5mm接口麦克风或HDMI音频输入)。以下是详细指南: 1. 连接音频输入设备 USB麦克风/声卡:直接插入树莓派的USB接口。3.5mm麦克…...
ZYNQ学习记录FPGA(二)Verilog语言
一、Verilog简介 1.1 HDL(Hardware Description language) 在解释HDL之前,先来了解一下数字系统设计的流程:逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端,在这个过程中就需要用到HDL,正文…...
el-amap-bezier-curve运用及线弧度设置
文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件,用于在 高德地图 上绘制贝塞尔曲线。 基本用法属性path定义曲线的路径,可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...
Docker环境下安装 Elasticsearch + IK 分词器 + Pinyin插件 + Kibana(适配7.10.1)
做RAG自己打算使用esmilvus自己开发一个,安装时好像网上没有比较新的安装方法,然后找了个旧的方法对应试试: 🚀 本文将手把手教你在 Docker 环境中部署 Elasticsearch 7.10.1 IK分词器 拼音插件 Kibana,适配中文搜索…...
