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>

②属性值

        

        ③效果展示

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

全国见!飞桨星河社区五周年,邀你共赴大模型盛宴!

自2018年对外发布以来&#xff0c;飞桨星河社区已汇集660万AI开发者。感谢大家一路见证了飞桨星河社区的成长&#xff0c; 也很荣幸飞桨星河社区陪伴了大家的AI开发旅程。 在这个大模型时代&#xff0c; 飞桨星河社区期待可以帮助开发者们实现自我价值&#xff0c; 获得更多成长…

[JDK工具-3] javac编译器生成class文件 java执行器运行class文件

位置&#xff1a;jdk\bin 语法&#xff1a;javac 源文件 -d class文件输出路径 -encoding utf-8 javac HelloWorld.java -d D:\project1\java8\java8\xin-javademo\src\main\java\com\xin\demo\hutooldemo\ -encoding utf-8 语法&#xff1a;java 类文件完全限定名&#xff08;…

CRM系统的销售预测是什么?怎么做?

简单来说&#xff0c;销售预测可以通过销售关键信息为团队预测收入&#xff0c;分配目标。CRM中的销售预测可以帮助企业制定合理的销售目标和策略&#xff0c;并通过实时数据发现瓶颈所在&#xff0c;提高团队绩效。下面说说CRM中销售预测是什么&#xff1f;如何销售预测&#…

数据中心走向绿色低碳,液冷存储舍我其谁

引言&#xff1a;没有最冷&#xff0c;只有更冷&#xff0c;绿色低碳早已成为行业关键词。 【全球存储观察 &#xff5c; 科技热点关注】 每一次存储行业的创新&#xff0c;其根源离不开行业端的用户需求驱动。 近些年从数据中心建设的整体发展情况来看&#xff0c;从风冷到…

目标分割技术-语义分割总览

前言 博主现任高级人工智能工程师&#xff0c;曾发表多篇SCI且获得过多次国际竞赛奖项&#xff0c;理解各类模型原理以及每种模型的建模流程和各类题目分析方法。目的就是为了让零基础快速使用各类代码模型&#xff0c;每一篇文章都包含实战项目以及可运行代码。欢迎大家订阅一…

抖音如何推广引流?抖音推广引流的经验与工具分享

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、了解抖音推广的价值 抖音作为一款热门的短视频应用&#xff0c;拥有庞大的用户群体和强大的传播力。通过抖音推广&#xff0c;企业或个人可以在短时间内获得大量的曝光和流量&…

浪潮信息云峦服务器操作系统KeyarchOS体验与实践

写在前面 大家好我是网络豆&#xff0c;一名云计算运维人员&#xff0c;本文将会带大家体验一下浪潮信息服务器操作系统云峦KeyarchOS。看看浪潮信息服务器操作系统云峦KeyarchOS的优势与实践操作如何。 背景了解 KeyarchOS是浪潮信息基于Linux Kernel、OpenAnolis等开源技术…

Windows本地搭建rtmp推流服务

前言 开发时偶尔需要使用rtmp直播流做视频流测试&#xff0c;苦于网上开源的rtmp视频流都已经失效&#xff0c;无奈只好尝试在本地自己搭建一个rtmp的推流服务&#xff0c;方便测试使用。 一、工具准备 Nginx&#xff1a;使用nginx-rtmp-win64推流工具FFmpeg&#xff1a;官方…

el-table 表格表头、单元格、滚动条样式修改

.2023.11.21今天我学习了如何对el-table表格样式进行修改&#xff0c;如图&#xff1a; 运用的两个样式主要是 1.header-cell-class-name&#xff08;设置表头&#xff09; 2.class-name&#xff08;设置行单元格&#xff09; 代码如下&#xff1a; <el-table :data&quo…

一份全面「梳理LLM幻觉问题」的综述

文章目录 一文全面梳理「LLM 幻觉问题」1. 幻觉的分类2. 幻觉的来源2.1 幻觉来自数据2.2 幻觉来自训练2.3 幻觉来自生成/推理 3. 幻觉的检测3.1 事实性幻觉的检测3.2 忠实性幻觉的检测 4. 幻觉的评估5. 幻觉的解决 一文全面梳理「LLM 幻觉问题」 相信大家在使用ChatGPT或者其他…

【开源】基于JAVA的学生日常行为评分管理系统

项目编号&#xff1a; S 010 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S010&#xff0c;文末获取源码。} 项目编号&#xff1a;S010&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.2.1 登录注册模块2.2…

【Odoo条码】Odoo中二维码或者条码应用场景(生成条码、解释条码)

在本文中&#xff0c;我们将编写一个简短的脚本来使用 Python 生成条形码。我们将使用 python-barcode 模块&#xff0c;它是 pyBarcode 模块的一个分支。该模块为我们提供了以 SVG 格式生成条形码的功能。 Pillow 是生成图像格式(如 png 或 jpg)条码所必需的。 需要的模块 p…

RESTful API 设计指南——为什么要用(上)

引言 在上一篇中&#xff1a;RESTful API 设计指南——开篇词 我们介绍了几个十分有争议的案例&#xff1a; 所有的接口都使用Post请求不管成功还是失败&#xff0c;HTTP状态码都返回200API命名千奇百怪 本章我们来深入分析一下&#xff0c;为什么不要像案例中所说的那样干…

基于 Glibc 版本升级的 DolphinDB 数据查询性能优化实践

在高并发查询、查询需要涉及很多个分区的情况下&#xff0c;低版本的 glibc&#xff08;低于2.23&#xff09;会严重影响查询性能。需要升级 glibc 解决该问题优化性能。我们撰写了本文&#xff0c;通过 patchelf 工具修改可执行文件和动态库的 rpath&#xff0c;达到无需升级系…

火爆全球的生成式AI,为创业者带来了哪些机遇?

众所周知&#xff0c;由生成式AI&#xff08;Artificial Intelligence Generated Content&#xff0c;也称AIGC&#xff09;和大语言模型引发的人工智能热潮正在席卷全球。其给整个科技产业带来的巨大变革&#xff0c;不亚于当年云计算的横空出世。 来自麦肯锡的《生成式人工智…

kubernetes测试部署一个nginx

在kubenetes集群中部署一个nginx程序测试集群是否能正常工作 #部署nginx程序 [rootmaster ~]# kubectl create deployment nginx --imagenginx:1.18-alpine #开放端口 [rootmaster ~]# kubectl expose deployment nginx --port80 --typeNodePort #查看pod状态 [rootmaster …

Thinkphp6实现定时任务功能

本文主要介绍命令启动定时任务的功能&#xff0c;按照CRMEB标准版的程序为大家详细的进行实现过程的介绍 首先创建安装Worker&#xff0c;执行composer require topthink/think-worker 安装在config/console.php中定义指令 timer > \crmeb\command\Timer::class 3. 对应图1…

sortablejs拖拽后新增和删除行时顺序错乱

问题描述&#xff1a;如下图所示&#xff0c;使用sortablejs拖拽后&#xff0c;在序号2后新增行会出现新增行跑到第一行的错误顺序。 解决&#xff1a;在进行拖拽后&#xff0c;对表格数据进行清空重新赋值。

【STL】string类(中)

目录 1&#xff0c;rbegin 和 rend 2&#xff0c;reserve & capacity 3&#xff0c;max_size ( ) 4&#xff0c;size&#xff08;&#xff09;& resize 1&#xff0c;void resize (size_t&#xff0c;char c&#xff09; 5&#xff0c;push_back & append 1…

PHP/Laravel通过经纬度计算距离获取附近商家

实际开发中,常常需要获取用户附近的商家,思路是 获取用户位置(经纬度信息)在数据库中查询在距离范围内的商家 注: 本文章内计算距离所使用地球半径统一为 6378.138 km public function mpa_list($latitude,$longitude,$distance){// $latitude 34.306465;// $longitude 10…