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

vue + uniapp 实现仿百度地图/高德地图/美团/支付宝滑动面板纯css 实现

news 来源：原创 2025/9/19 19:03:20

概要

使用百度地图、各种单车APP时，对地图上的滑动面板很感兴趣，于是根据自己的理解实现了一下
之前用的js实现，滑动的时候没有原生好
这一次用的css实现

代码

<template><view class="container"><mapstyle="position: fixed;height: 100%;width: 100%;top: 0;left: 0;z-index: 0;":enable-scroll="!isPanelTouched"></map><viewstyle="height: 500rpx;width: 100%;background-color: rgba(255, 255, 255, 0.8);z-index: -1;"></view><viewclass="panel"@touchstart="onPanelTouchStart"@touchend="onPanelTouchEnd"><view class="handle"></view><view class="item" v-for="item in 50" :key="item">{{ item }}</view></view><viewv-if="isPanelTouched"class="mask"@touchstart.stop.prevent@touchmove.stop.prevent@touchend.stop.prevent></view></view>
</template><script>
export default {data() {return {isPanelTouched: false}},methods: {onPanelTouchStart() {this.isPanelTouched = true},onPanelTouchEnd() {this.isPanelTouched = false}}
}
</script><style scoped lang="scss">
.panel {position: relative;background-color: #fff;border-top-left-radius: 10px;border-top-right-radius: 10px;box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);z-index: 2;.handle {height: 30px;background-color: #eee;border-top-left-radius: 10px;border-top-right-radius: 10px;cursor: pointer;display: flex;justify-content: center;align-items: center;&::after {content: '';width: 30px;height: 3px;background-color: #999;border-radius: 3px;}}.content {height: calc(100% - 30px);overflow-y: auto;}.item {text-align: center;font-size: 14px;color: #333;margin-bottom: 10px;padding: 10px;border-bottom: 1px solid #eee;}
}.mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;background-color: rgba(0, 0, 0, 0);
}
</style>

效果图

在这里插入图片描述

vue + uniapp 实现仿百度地图/高德地图/美团/支付宝滑动面板纯css 实现

概要使用百度地图、各种单车APP时，对地图上的滑动面板很感兴趣，于是根据自己的理解实现了一下之前用的js实现，滑动的时候没有原生好这一次用的css实现代码 <template><view class"container"><mapstyle"…...

编程日记 2025/9/19 19:03:20

124. 二叉树中的最大路径和

https://leetcode.cn/problems/binary-tree-maximum-path-sum/description/?envTypestudy-plan-v2&envIdtop-interview-150对于这题我开始的思路是路径我们可以看作是一条线，我们确定一个点后可以往两侧延伸（就是左右子树的方向）&#x…...

编程日记 2025/9/19 21:26:11

spark运行架构

运行架构：Spark采用master - slave结构，Driver作为master负责作业任务调度，Executor作为slave负责实际执行任务。核心组件： Driver：执行Spark任务的main方法，负责将用户程序转化为作业、调度任务、跟踪E…...

编程日记 2025/9/19 22:32:27

开源的7B参数OCR视觉大模型：RolmOCR

1. 背景介绍早些时候，Allen Institute for AI 发布了 olmOCR，这是一个基于 Qwen2-VL-7B 视觉语言模型（VLM）的开源工具，用于处理 PDF 和其他复杂文档的 OCR（光学字符识别）。开发团队对该工具的…...

编程日记 2025/9/19 9:10:54

Http代理服务器选型与搭建

代理服务器选型-Squid 缓存加速缓存频繁访问的网页、图片等静态资源，减少对原始服务器的重复请求，提升响应速度支持HTTP、HTTPS、FTP等协议，通过本地缓存直接响应客户端请求访问控制基于ACL（访问控制列表）实现精细…...

编程日记 2025/9/19 17:07:06

如何实现Microsoft Word (.docx) 格式到 FastReport .NET (.frx) 文件的转换

现代数据处理技术和文档工作流自动化需要集成各种文件格式，以确保软件产品之间的无缝交互。Microsoft Word 凭借其丰富的功能，已成为最受欢迎的文本编辑器之一，适用于各种任务。有时，您可能需要将这些文档转换为其他应用程序特定…...

编程日记 2025/9/19 22:31:18

雷电多开器自动化运行、自动登录APP刷新日用户活跃量

文章目录简介接单价格代码对爬虫、逆向感兴趣的同学可以查看文章，一对一小班教学(系统理论和实战教程)、提供接单兼职渠道：https://blog.csdn.net/weixin_35770067/article/details/142514698 简介客户有一个APP，需要在雷电模拟器每天自动运行APP，每台模拟器设置不同的I…...

编程日记 2025/9/19 10:08:08

Dify教程01-Dify是什么、应用场景、如何安装

Dify教程01-Dify是什么、应用场景、如何安装大家好，我是星哥，上篇文章讲了Coze、Dify、FastGPT、MaxKB 对比，今天就来学习如何搭建Dify。 Dify是什么 **Dify 是一款开源的大语言模型(LLM) 应用开发平台。**它融合了后端即服务&#xff08…...

编程日记 2025/9/19 5:21:20

《深入探秘：分布式软总线自发现、自组网技术原理》

在当今数字化浪潮中，分布式系统的发展日新月异，而分布式软总线作为实现设备高效互联的关键技术，其自发现与自组网功能宛如打开智能世界大门的钥匙，为多设备协同工作奠定了坚实基础。分布式软总线的重要地位分布式软总线是构建…...

编程日记 2025/9/19 15:00:12

spring扫描自定义注解注册bean

前言我们知道，在spring中，我们只需要加上注解Component，就可以自动注入到spring容器中，如果我们自定义注解，怎么让spring识别到，注入到容器中呢，下面我们来看看。基础使用自定义注解 Tar…...

编程日记 2025/9/19 9:11:12

【RL系列】StepFun之Open-Reasoner-Zero

1. 简介开源了一个大规模RL训练框架之Open-Reasoner-Zero，仅使用vanilla PPO，GAE中参数 λ 1 , γ 1 \lambda 1, \gamma 1 λ1,γ1，rule-based reward，不需要KL regularization就可以增加response length和benchmark上的指标。…...

编程日记 2025/9/17 23:00:56

括号匹配问题--栈

括号匹配问题栈的应用代码概览栈操作函数详解1.初始化栈（stackInit）2.向栈中压入元素（stackpush）3.获取栈顶元素（stacktop）4.弹出栈顶元素（stackpop）5.销毁栈（stackdest…...

编程日记 2025/9/19 14:55:22

LangChain4j（7）：Springboot集成LangChain4j实现知识库RAG

我们之前的直接整合进SpringBoot进行实战，最终其实还会将查询到的内容，和对话上下文组合起来，发给LLM为我们组织语言进行回答: 配置一个Content Retriever 内容检索器，提供向量数据库和向量模型及其他参数将内容检索器绑定到AiSe…...

编程日记 2025/9/19 12:11:52

企业使用Excel开展数据分析限制和建议完整版

Excel作为企业数据分析的常用工具，虽然功能强大，但也存在一些限制和使用时的注意事项。以下是综合整理的关键点： 一、Excel在企业数据分析中的限制数据处理规模有限 Excel的行列限制（如Excel 2019及之前版本最多支持1,048,576行…...

编程日记 2025/9/19 17:20:40

41、web前端开发之Vue3保姆教程(五实战案例)

一、项目简介和需求概述 1、项目目标 1.能够基于Vue3创建项目 2.能够基本Vue3相关的技术栈进行项目开发 3.能够使用Vue的第三方组件进行项目开发 4.能够理解前后端分离的开发模式 2、项目概述使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，…...

编程日记 2025/9/10 6:08:05

Quill富文本编辑器支持自定义字体（包括新旧两个版本，支持Windings 2字体）

文章目录 1 新版（Quill2 以上版本）2 旧版（Quill1版本） 1 新版（Quill2 以上版本） <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta n…...

编程日记 2025/9/18 22:37:41

Flutter打包ipa报错解决方案在Flutter开发中，打包iOS应用时可能会遇到以下错误： error: exportArchive: The data couldn’t be read because it isn’ in the correct format. 或者 Encountered error while creating the IPA: error: exportArchive…...

编程日记 2025/9/15 17:14:03

UV安装与使用

1. 概述 GitHub：astral-sh/uv: An extremely fast Python package and project manager, written in Rust. 官网：uv An extremely fast Python package and project manager, written in Rust. 效率神器，基于Rust实现，比传统工具快…...

编程日记 2025/9/18 3:30:06

SQL练习题

数据表介绍 –1.学生表 Student(SId,Sname,Sage,Ssex) --SId 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别–2.课程表 Course(CId,Cname,TId) --CId 课程编号,Cname 课程名称,TId 教师编号–3.教师表 Teacher(TId,Tname) --TId 教师编号,Tname 教师姓名–4.成绩表…...

编程日记 2025/9/17 6:18:46

Rust Command无法执行*拓展解决办法

async fn run_cmd_async_out<I, S>(cmd: &str, args: I, timeout_s: u64, with_http_proxy: bool) -> Result<String> whereI: IntoIterator<Item S>,S: AsRef<OsStr>, {let mut cmd tokio::process::Command::new(cmd);// 让 sh 来运行命令&…...

编程日记 2025/9/10 19:08:25

利用Hadoop MapReduce实现流量统计分析

在现代大数据时代，处理和分析海量数据是一项常见的任务。Hadoop MapReduce提供了一种高效的方式来处理分布式数据集。本文将通过一个具体的示例——流量统计分析，来展示如何使用Hadoop MapReduce进行数据处理。项目背景在电信行业中，对用…...

编程日记 2025/9/19 22:16:43

Spring Boot应用程序接入ELK-003

Spring Boot应用程序接入ELK 一、项目依赖集成在将Spring Boot应用程序接入ELK日志搜索引擎时，首先要在项目中集成相关依赖： （一）Logstash依赖 <dependency><groupId>net.logstash.logback</groupId><a…...

编程日记 2025/9/18 10:09:33

spark（一）

本节课围绕Spark Core展开深入学习，了解了Spark的运行架构、核心组件、核心概念以及提交流程，明晰其整体运行机制与各部分协作逻辑。重点聚焦于两个核心组件；对RDD相关概念进行了细致学习，包括其核心属性、执行原理、序列化方式、…...

编程日记 2025/9/19 6:08:55

绿电直供零碳园区：如何用清洁能源重塑企业竞争力？

引言在全球积极应对气候变化的大背景下，“双碳” 目标已成为世界各国实现可持续发展的关键战略方向。我国也明确提出要在 2030 年前实现碳达峰，2060 年前实现碳中和，这一宏伟目标的提出，对各行各业都产生了深远影响，…...

编程日记 2025/9/19 5:12:41

国家科技奖项目答辩ppt设计_科技进步奖PPT制作_技术发明奖ppt美化_自然科学奖ppt模板

国家科学技术奖为了奖励在科学技术进步活动中做出突出贡献的公民、组织，调动科学技术工作者的积极性和创造性，加速科学技术事业的发展，提高综合国力而设立的一系列奖项。每两三年评选一次。科技奖ppt案例 WordinPPT / 持续为双一流高校、…...

编程日记 2025/9/18 0:41:15

LLM应用实战2-理解Tokens

文章目录基本定义Tokenization 的作用主流 Tokenization 算法示例示例GPT-4o&GPT-4o miniGPT-3.5 & GPT-4 基本定义 Tokens 是大型语言模型（LLM）处理文本或代码的最小语义单元，可包含以下形式： 字符（如英文…...

编程日记 2025/9/15 6:03:36

【Java面试系列】Spring Boot微服务架构下的分布式事务处理与性能优化详解 - 3-5年Java开发必备知识

【Java面试系列】Spring Boot微服务架构下的分布式事务处理与性能优化详解 - 3-5年Java开发必备知识引言在当今的微服务架构中，分布式事务处理和性能优化是面试中经常被问及的高频话题。随着系统规模的扩大，如何保证数据一致性和系统性能成为了开发者…...

编程日记 2025/9/19 8:36:15

NO.80十六届蓝桥杯备战|数据结构-字符串哈希|兔子与兔子(C++)

回忆：哈希函数与哈希冲突哈希函数：将关键字映射成对应的地址的函数，记为 Hash(key) Addr 。哈希冲突：哈希函数可能会把两个或两个以上的不同关键字映射到同⼀地址，这种情况称为哈希冲突。字符串哈希定义⼀个把字…...

编程日记 2025/9/19 18:37:54

Spring MVC 请求类型注解详解

Spring MVC 请求类型注解详解 1. 核心注解分类 Spring MVC 中的请求处理注解分为以下几类： 类别注解示例作用范围方法级注解RequestMapping, GetMapping 等方法级别参数级注解RequestParam, RequestBody方法参数模型/会话注解ModelAttribute, SessionAttributes方…...

编程日记 2025/9/17 14:24:41

RabbitMQ的死信队列和ttl

TTL ttl即过期时间，rbbitmq可以对队列和消息设置过期时间，当消息到存活时间之后，还没有被消费，就会被自动清除例如：在网上购物，经常会遇到一个场景，当下单超过24小时还未付款，订单…...

编程日记 2025/9/14 22:06:16

[特殊字符] Hyperlane：Rust 高性能 HTTP 服务器库，开启 Web 服务新纪元！

🚀 Hyperlane：Rust 高性能 HTTP 服务器库，开启 Web 服务新纪元！ 🌟 什么是 Hyperlane？ Hyperlane 是一个基于 Rust 语言开发的轻量级、高性能 HTTP 服务器库，专为简化网络服务开发而设计。它支…...

编程日记 2025/9/18 7:54:27

【后端开发】Spring MVC-常见使用、Cookie、Session

文章目录代码总结初始化传递参数单参数多参数传递对象后端参数重命名（后端参数映射）必传参数设置非必传参数传递数组传递集合传递JSON数据JSON语法JSON格式转换JSON优点传递JSON对象获取URL中参数传递文件 Cookie与SessionCookieCookie机制 SessionC…...

编程日记 2025/9/14 21:56:37

Element Plus 去掉表格外边框

使用el-table组件拖拽时， 想使用自定义样式进行拖拽, 想去掉外边框， 并在表头加入竖杠样式 css代码： <style lang"less" scoped>// 表格右边框线 .el-table--border::after {width: 0; }// 表格上边框线 :deep(.el-table__i…...

编程日记 2025/9/18 23:00:58

安全厂商安全理念分析

奇安信（toB企业安全） 安全理念：率先提出 “内生安全” 理念。即把安全能力内置到信息化环境中，通过信息化系统和安全系统的聚合、业务数据和安全数据的聚合、IT 人才和安全人才的聚合，让安全系统像人的免疫系统一样&a…...

编程日记 2025/9/15 10:22:29

GaussDB Plan Hint调优实战：从执行计划控制到性能优化

GaussDB Plan Hint调优实战：从执行计划控制到性能优化一、GaussDB Plan Hint核心价值执行计划控制原理 mermaid graph TD A[SQL提交] --> B(优化器决策) B --> C{使用Hint?} C -->|是| D[强制指定执行路径] C -->|否| E[自动生成最优计划] D --&g…...

编程日记 2025/9/15 15:57:24

【力扣hot100题】（078）跳跃游戏Ⅱ

好难啊，我愿称之为跳崖游戏。依旧用了两种方法，一种是我一开始想到的，一种是看答案学会的。我自己用的方法是动态规划，维护一个数组记录到该位置的最少步长，每遍历到一个位置就嵌套循环遍历这个位置能到达的位置&a…...

编程日记 2025/9/17 16:14:17

基于 DeepSeek API 实现一个简单的数据分析 Agent

写在前面本文将带你一步步了解：什么是（简单的）数据分析 Agent？为什么使用 LLM 进行数据分析？如何利用 DeepSeek API 的能力？设计并实现一个基于 Python 和 Pandas 的基础数据分析 Agent。探讨其局限性、安全考量及未来方向。我们的目标是构建一个简单的 Agent，它能理…...

编程日记 2025/9/17 18:07:21

VUE3+TS+elementplus+Django+MySQL实现从前端增加数据存入数据库，并显示在前端界面上

一、前言前面实现了从数据库读取数据，显示在前端界面上VUE3TSelementplusDjangoMySQL实现从数据库读取数据，显示在前端界面上，以及使用VUE3TSelementplus创建一个增加按钮。今天通过在前端的增加功能，新增数据，传到后…...

编程日记 2025/9/19 18:39:00

Django 创建CSV文件

Django使用Python内置的CSV库来创建动态的CSV（逗号分隔值）文件。我们可以在项目的视图文件中使用这个库。让我们来看一个例子，这里我们有一个Django项目，我们正在实现这个功能。创建一个视图函数 getfile() 。 Django CSV例子 …...

编程日记 2025/9/18 0:52:44

spring之JdbcTemplate、GoF之代理模式、面向切面编程AOP

一、JdbcTemplate JdbcTemplate是Spring提供的一个JDBC模板类，是对JDBC的封装，简化JDBC代码。当然，你也可以不用，可以让Spring集成其它的ORM框架，例如：MyBatis、Hibernate等。接下来我们简单来学习一下&…...

编程日记 2025/9/19 19:04:40

【QT】QT中的文件IO

QT中的文件IO 一、有关文件IO的类二、步骤1、定义QFile的对象,与要读写的文件绑定在一起2、打开文件3、读写文件1）读取文件2）写入文件 4、关闭文件5、示例代码： 三、QString和QByteArray之间的转换1、方法2、示例代码： 四、QFileI…...

编程日记 2025/9/19 7:44:20

linux安装mysql常出现的问题

wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noarch.rpm yum update yum install mysql-server 权限设置： chown -R mysql:mysql /var/lib/mysql/ 初始化 MySQL： mysqld --initiali…...

编程日记 2025/9/17 21:07:04

ArcGIS Engine开发教程--从零搭建GIS桌面应用

目录一、ArcGIS Engine简介 1.1 什么是ArcGIS Engine？ 1.2 应用场景二、环境搭建 2.1 安装准备 2.2 配置项目三、核心对象与基础概念 3.1 核心组件 3.2 接口编程四、实战：开发简易地图查看器 4.1 加载地图文档 4.2 添加矢量图层 4.3 实…...

编程日记 2025/9/18 23:53:28

DeepSeek 助力 Vue3 开发：打造丝滑的日历（Calendar）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/9/19 2:00:46

Conda使用方法详解

Conda是一个开源的包管理和环境管理系统，主要用于Python/R等科学计算领域，可以轻松管理不同项目的依赖关系。以下是Conda的详细使用方法： 一、安装与配置 1.安装Miniconda/Anaconda Miniconda是精简版，只包含conda和Python Ana…...

编程日记 2025/9/19 6:52:04

CausalML 基于机器学习算法的因果推理方法

CausalML 是一个 Python 包，它使用基于最新研究的机器学习算法提供一套提升建模和因果推理方法。它提供了一个标准界面，允许用户从实验或观察数据中估计条件平均处理效应 （CATE），也称为个体治疗效应 （ITE&a…...

编程日记 2025/9/18 12:15:04

HTML的svg元素

编程日记 2025/9/18 18:19:06

文件上传、读取与包含漏洞解析及防御实战

一、漏洞概述文件上传、读取和包含漏洞是Web安全中常见的高危风险点，攻击者可通过此类漏洞执行恶意代码、窃取敏感数据或直接控制服务器。其核心成因在于开发者未对用户输入内容进行充分验证或过滤，导致攻击者能够绕过安全机制，上传或执行…...

编程日记 2025/9/15 9:20:02

物联网与边缘计算之物联网架构（感知层、网络层、应用层）

一、感知层：数据采集与智能终端 1. 核心功能感知层是物联网的数据入口，通过物理设备（如传感器、RFID标签）实时采集环境、设备或生物体的物理量（温度、湿度）、标识信息（如二维码）及…...

编程日记 2025/9/19 11:06:29

概要

代码

效果图

相关文章：