uniapp的底部弹出层实现保姆式教程

实现照片:

此过程先进入uniapp官网,找到扩展组件

打开找到里面的uni-popup和uni-icons

点击进入,下载&安装

点击下载并导入HBuilderX

导入到你使用的目录,如test目录

同样将uni-icons点击下载并导入HBuilderX

点击合并

此时test文件夹下多了一个uni-modules文件夹

在pages下的index.vue内编写代码,如下:

<template><view><button @click="open">打开弹窗</button><uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0" :show="true" @close="closePopup"><view style="border-bottom: 1rpx solid #E5E5E5;padding:24rpx 0 32rpx; text-align: center;">提示</view><view class="flex-colomn"><view class="tet">正确答案为:{{answer}}</view><uni-icons class="close-btn" type="closeempty" size="20" @click="closePopup"></uni-icons></view></uni-popup></view>
</template>
<script>
export default {data() {return {answer: 'A',}},methods:{open(){// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']this.$refs.popup.open('bottom')},closePopup() {this.$refs.popup.close()},}
}
</script><style>
.tet {display: flex;justify-content: center;align-items: flex-start;height: 45vh;font-size: 25px;margin-top: 20rpx;
}
.close-btn {position: absolute;top: 20rpx;right: 20rpx;cursor: pointer;}</style>

里面代码官网都有解释,获得底部弹出效果。

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

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

相关文章

运输层(计算机网络谢希仁第八版)——学习笔记五

课件&#xff1a;课程包列表 (51zhy.cn) 目录 运输层协议概述 用户报协议UDP 传输控制协议TCP概述 可靠传输的工作原理 TCP可靠传输的实现 TCP的流量控制 TCP的拥塞控制 TCP的运输连接管理 运输层协议概述 进程之间的通信 运输层的位置——只有位于网络边缘部分的主机的协议栈才…

Jmeter+Grafana+Prometheus搭建压测监控平台

本文不介绍压测的规范与技术指标&#xff0c;本文是演示针对Jmeter如何将压测过程中的数据指标&#xff0c;通过Prometheus采集存储&#xff0c;并在Granfan平台进行仪表盘展示; 介绍 系统压测属于日常项目开发中的一个测试环节&#xff0c;使用测试工具模拟真实用户行为&…

Day 46 139.单词拆分

单词拆分 给定一个非空字符串 s 和一个包含非空单词的列表 wordDict&#xff0c;判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词。 说明&#xff1a; 拆分时可以重复使用字典中的单词。 你可以假设字典中没有重复的单词。 示例 1&#xff1a; 输入: s “leet…

小红书自动私信获客,打造个人品牌

在当今这个内容为王、社交至上的时代&#xff0c;小红书作为新兴的社交电商平台&#xff0c;凭借其独特的社区氛围和强大的种草能力&#xff0c;成为了众多KOL、商家以及个人品牌打造的首选平台。想要在小红书上脱颖而出&#xff0c;精准引流获客&#xff0c;利用自动私信功能不…

国外新闻媒体推广:多元化媒体分发投放-大舍传媒

前言 &#xff1a;随着全球化的进程&#xff0c;国外新闻市场呈现出快速发展的趋势。在这个趋势下&#xff0c;国外新闻媒体推广成为了各行业企业宣传业务的重要一环。本文将重点介绍大舍传媒的多元化媒体分发投放服务&#xff0c;以及对国外新闻媒体推广的意义。 1. 多元化媒…

linux内核:持续更新

内核源码树 COPYING文件是内核许可证&#xff0c;CREDITS是开发了很多内核代码的开发者列表&#xff0c;MAINTAINERS是维护者列表&#xff0c;它们负责维护内核子系统和驱动程序&#xff0c;makefile是基本内核的makefile 向内核插入驱动模块 命令&#xff1a;insmod xxx.ko …

网络库-POCO介绍

1.简介 POCO C Libraries 提供一套 C 的类库用以开发基于网络的可移植的应用程序&#xff0c;它提供了许多模块&#xff0c;包括网络编程、文件系统访问、线程和并发、数据库访问、XML处理、配置管理、日志记录等功能。Poco库的设计目标是易于使用、高度可定制和可扩展。 包含…

LeetCode2390从字符串中移除星号

题目描述 给你一个包含若干星号 * 的字符串 s 。在一步操作中&#xff0c;你可以&#xff1a;选中 s 中的一个星号。移除星号 左侧 最近的那个 非星号 字符&#xff0c;并移除该星号自身。返回移除 所有 星号之后的字符串。注意&#xff1a;生成的输入保证总是可以执行题面中描…

EUCR-30S电机保护器施耐德EOCR

​EOCR主要产品有电子式电动机保护继电器&#xff0c;电子式过电流继电器&#xff0c;电子式欠电流继电器&#xff0c;电子式欠电压继电器&#xff0c;其它保护和监视装置&#xff0c;电流互感器。 电器密集型设计 ■ 二个集成组装电流互感器 ■ 欠载保护&#xff08;空转保护…

2024.5.9 关于 SpringCloud —— Nacos 的安装与配置

目录 Windos 安装步骤 docker 启动 nacos Windos 安装步骤 1&#xff09;点击下方链接&#xff0c;进入并访问 nacos 官网 Nacos官网 | Nacos 官方社区 | Nacos 下载 | Nacos 2&#xff09;按照下图箭头指示下载对应版本的压缩包 3&#xff09;此时我们将得到一个压缩包&…

2024国考行测、申论资料大全,做好备考真的很重要!

1. 国考是什么? 国考,全称国家公务员考试,是选拔国家公务员的重要途径。通过国考,你将有机会进入政府部门,为国家建设贡献力量。 2. 国考难在哪里? 国考之所以难,主要体现在以下几个方面: (1) 竞争激烈 每年国考报名人数都在百万以上,而录取率却不足2%。千军万马过独木桥…

保研机试之【设备驱动程序】

B选项&#xff1a; 综上&#xff0c;我认为这道题选择D~