uni-app - 弹出框

目录

1.基本介绍

 2.原生uinapp 通过uni.showActionSheet实现

3.使用组件 Popup 弹出层 

        ③效果展示


1.基本介绍

        弹出框让我们在需要时在屏幕底部弹出一个菜单,它通常用于在各种应用程序中进行选择操作。Uniapp为我们提供了基本的底部弹出框组件,但它也有一些自定义功能。

        弹出框组件由两个主要组成部分组成:触发元素和弹出框。触发元素通常是一个按钮或其他形式的UI元素,它与弹出框逻辑相互作用。弹出框是一个以弹出方式显示菜单项的UI元素集合。

 2.原生uinapp 通过uni.showActionSheet实现

        ①在需要的地方,先绑定@click="showActionsheet

        ②在methos中加入跳转事件
       

showActionsheet() {
                  uni.showActionSheet({
                    itemList: [
                        '拍摄图片', 
                        '相册图片'
                    ],
                    success: (res) => {
                      console.log('选择了第' + (res.tapIndex + 1) + '个选项');
                       
                    },
                    fail: (err) => {
                      console.log('弹窗取消');
                    }
                  });
                }

3.使用组件 Popup 弹出层 

        ①代码运行:

        注意:在多个view中使用时,应是二级,否则可能会失效

(通俗点:就是u-popup的外面只能有一个view包裹着)

<template><view>//绑定事件<u-button @click="show = true">打开</u-button><u-popup :show="show" @close="show = false" @open="show=true" mode="top">//展示内容<view><text>出淤泥而不染,濯清涟而不妖</text><text>出淤泥而不染,濯清涟而不妖</text><text>出淤泥而不染,濯清涟而不妖</text></view></u-popup></view>
</template>
<script>export default {data() {return {show: false}}, methods: {open() {// console.log('open');},close() {this.show = false// console.log('close');}}}
</script>

②属性值

        

        ③效果展示

                ​​​​​​​        ​​​​​​​        ​​​​​​​       

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

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

相关文章

OpenSearch开发环境安装Docker和Docker-Compose两种方式

文章目录 简介常用请求创建映射写入数据查询数据其他 安装Docker方式安装OpenSearch安装OpenSearchDashboard Docker-Compose方式Docker-Compose安装1.设置主机环境2.下载docker-compose.yml文件3.启动docker-compose4.验证 问题问题1&#xff1a;IPv4 forwarding is disabled.…

如何搭建Zblog网站并通过内网穿透将个人博客发布到公网

文章目录 1. 前言2. Z-blog网站搭建2.1 XAMPP环境设置2.2 Z-blog安装2.3 Z-blog网页测试2.4 Cpolar安装和注册 3. 本地网页发布3.1. Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1. 前言 想要成为一个合格的技术宅或程序员&#xff0c;自己搭建网站制作网页是绕…

Altium Designer学习笔记11

画一个LED的封装&#xff1a; 使用这个SMD5050的封装。 我们先看下这个芯片的功能说明&#xff1a; 5050贴片式发光二极管&#xff1a; XL-5050 是单线传输的三通道LED驱动控制芯片&#xff0c;采用的是单极性归零码协议。 数据再生模块的功能&#xff0c;自动将级联输出的数…

CSGO搬砖干货,全网最详细教学!

CSGO游戏搬砖全套操作流程及注意事项&#xff08;第一课&#xff09; 在电竞游戏中&#xff0c;CSGO&#xff08;Counter-Strike: Global Offensive&#xff09;被广大玩家誉为经典之作。然而&#xff0c;除了在游戏中展现个人实力和团队合作外&#xff0c;有些玩家还将CSGO作为…

Java之API(上)

前言&#xff1a; 这一次内容主要是围绕Java开发中的一些常用类&#xff0c;然后主要是去学习这些类里面的方法。 一、高级API&#xff1a; (1)介绍&#xff1a;API指的是应用程序编程接口&#xff0c;API可以让编程变得更加方便简单。Java也提供了大量API供程序开发者使用&…

如何使用Google My Business来提升您的内容和SEO?

如果您的企业有实体店&#xff0c;那么使用Google My Business&#xff08;GMB&#xff09;来改善您的本地SEO并增强您的在线形象至关重要。Google My Business &#xff08;GMB&#xff09; 是 Google 提供的补充工具&#xff0c;使企业能够控制其在 Google 搜索和地图上的数字…

【数字化转型方法论读书笔记】-数据中台角色解读

一千个读者&#xff0c;就有一千个哈姆雷特。同样&#xff0c;数据中台对于企业内部不同角色的价值也不同&#xff0c;下面分别从董事长、CEO、 CTO/CIO、IT 架构师、数据分析师这 5 个角色的视角详细解读数据中台。 1、董事长视角下的数据中台 在数字经济时代&#xff0c;企业…

RTT打印在分区跳转后无法打印问题

场景&#xff1a; RTT打印仅占用JLINK的带宽&#xff0c;比串口传输更快更简洁&#xff0c;同时RTT可以使用jscope对代码里面的变量实时绘图显示波形&#xff0c;而采用串口打印波形无法实时打印。同时可以保存原始数据到本地进行分析&#xff0c;RTT在各方面完胜串口。 问题描…

【Vue入门篇】基础篇—Vue指令,Vue生命周期

&#x1f38a;专栏【JavaSE】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f354;Vue概述&#x1f384;快速入门&#x1f33a;Vue指令⭐v-…

AI绘画工具汇总:免费、简单易上手

欢迎来到魔法宝库&#xff0c;传递AIGC的前沿知识&#xff0c;做有格调的分享❗ 喜欢的话记得点个关注吧&#xff01; 提到AI绘画&#xff0c;许多人通常会想到Midjourney和Stable Diffusion等工具&#xff0c;然而&#xff0c;这些工具对于新手而言门槛较高&#xff0c;不太友…

【C++】——标准模板库STL作业(其一)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

安卓毕业设计基于安卓android微信小程序的家校通系统

运行环境 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序运行软件&#xff1a;微信开发者 项目介绍 基于微信小程序的家校通系统的设计基…

【实用】PPT没几页内存很大怎么解决

PPT页数很少但导出内存很大解决方法 1.打开ppt点击左上角 “文件”—“选项” 2.对话框选择 “常规与保存” &#xff08;1&#xff09;如果想要文件特别小时可 取消勾选 “将字体嵌入文件” &#xff08;2&#xff09;文件大小适中 可选择第一个选项 “仅最入文档中所用的字…

每日一题 1410. HTML 实体解析器(中等,模拟)

模拟&#xff0c;没什么好说的 class Solution:def entityParser(self, text: str) -> str:entityMap {&quot;: ",&apos;: "",>: >,<: <,&frasl;: /,&amp;: &,}i 0n len(text)res []while i < n:isEntity Falseif …

Oracle-客户端连接报错ORA-12545问题

问题背景: 用户在客户端服务器通过sqlplus通过scan ip登陆访问数据库时&#xff0c;偶尔会出现连接报错ORA-12545: Connect failed because target host or object does not exist的情况。 问题分析&#xff1a; 首先&#xff0c;登陆到连接有问题的客户端数据库上&#xff0c;…

单片机调试技巧--修改bin文件实现断点

fromelf --text -a -c --outputall.dis F103_Moduel\F103_Moduel.axffromelf --bin --outputtest.bin F103_Moduel\F103_Moduel.axf 在启动文件中&#xff0c;修改UsageFault_Handler UsageFault_Handler\PROC; get current contextTST lr, #0x04 ; if(!EXC_RETURN[2])ITE…

2014年08月25日 Go生态洞察:深入理解Go中的常量

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

高通OTA升级非常规分区方法

高通OTA升级非常规分区方法 1. 高通LE OTA背景2. 高通LE OTA升级方案2.1 SDX12 OTA方案2.2 OTA升级TZ/RPM/Aboot OTA是一个通用述语&#xff0c;常见的解释为over the air。通过这一解释&#xff0c;OTA最开始的概念&#xff0c;是空中升级。后来&#xff0c;又衍生出了FOTA&am…

中国智能汽车这一年,主打一个“卷”

文丨刘俊宏 “这才刚过去半年多&#xff0c;汽车行业又更新了一轮。”一位车评人在广州车展感叹道。 作为每年最后一个A级车展&#xff0c;广州车展向来被视为中国车市的“风向标”。相比上海车展“拥抱汽车行业新时代”、成都车展“驭见未来”的主题&#xff0c;广州车展“新…

数据结构(超详细讲解!!)第二十四节 二叉树(上)

1.定义 二叉树&#xff08;Binary Tree&#xff09;是另一种树型结构。 二叉树的特点&#xff1a; 1&#xff09;每个结点至多只有两棵子树&#xff08;即二叉树中不存在度大于2的结点&#xff09;&#xff1b; 2&#xff09;二叉树的子树有左右之分&#xff0c;其次序…