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

小程序中设置可拖动区域

官方说明文档:
https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html


demo:浮动控件上下移动交互

.wxmx

<movable-area><!-- y="890rpx" 初始控件展示的Y轴位置 --><movable-view direction="vertical" y="890rpx"><!-- 控件 --><view bindtap="XXX" class="card"><image src="XXX.png" mode="widthFix"></image></view></movable-view>
</movable-area>

.wxss

/*
height: calc(100% - 80rpx - 125rpx); 可移动区域的高度,决定了最顶部位置、最底部位置
其中 125rpx 控件图片的高度 | 80rpx 移动时Y轴开始的最顶部位置
right: 33rpx; X轴展示到右侧固定位置
top: 80rpx; 移动时Y轴开始的最顶部位置
*/
movable-area{ width: 0; height: calc(100vh - 80rpx - 125rpx); position: fixed; right: 33rpx; top: 80rpx;}
movable-view{ width: fit-content; height: fit-content;}
.card{ width: 121rpx; position: relative; left: -121rpx;}
.card image{ width: 100%;}

效果截图(初始位置、最顶部位置、最底部位置):

相关文章:

小程序中设置可拖动区域

官方说明文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.htmlhttps://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html demo&#xff1a;浮动控件上下移动交互 .wxmx <movable-area><!-- y"…...

前端后台管理开发

1通常项目从头开发&#xff0c;有人是二开&#xff0c;有人是从头&#xff0c;也有人是复制之前人留的。 2通常要自己写就很费时间&#xff0c;多数都是接别人的二手代码继续干&#xff0c;导致很多人没有从头开发的经验&#xff0c;做两三年。 3项目开始一般要选择搭建环境&am…...

GDAL+C#实现矢量多边形转栅格

1. 开发环境测试 参考C#配置GDAL环境&#xff0c;确保GDAL能使用&#xff0c;步骤简述如下&#xff1a; 创建.NET Framework 4.7.2的控制台应用 注意&#xff1a; 项目路径中不要有中文&#xff0c;否则可能报错&#xff1a;can not find proj.db 在NuGet中安装GDAL 3.9.1和G…...

Python 爬虫实战之爬拼多多商品做数据分析

一、项目背景 在电商领域&#xff0c;拼多多作为一家具有广泛影响力的平台&#xff0c;拥有大量的商品信息和用户数据。通过爬取拼多多商品数据并进行分析&#xff0c;可以了解市场趋势、消费者需求以及竞争对手情况&#xff0c;为企业决策和产品优化提供有力支持。 二、技术准…...

爬虫基础

maven pom <dependencies><!--前端jqury--><dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.16.1</version></dependency><!--http工具--><dependency><grou…...

HTML3D旋转相册

文章目录 序号目录1HTML满屏跳动的爱心(可写字)2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐...

[linux]快速入门

学习目标 通过学习能够掌握以下的linux操作 操作系统 按照应用领域的不同, 操作系统可以分为几类 桌面操作系统服务器操作系统移动设备操作系统嵌入式操作系统 不同领域的主流操作系统 桌面操作系统 Windows(用户数量最多)MacOS(操作体验好&#xff0c;办公人士首选)Linux…...

域3:安全工程 第6章 密码学与对称密钥算法

---域3主要包括OSG 6、7、8、9、10 章--- 随着信息化时代的推进&#xff0c;网络安全愈发关键。CISSP认证考试中的第6章&#xff0c;专注于密码学与对称密钥算法&#xff0c;这两者是网络安全的核心。 密码学&#xff0c;历经演变&#xff0c;从古代简单的替代密码到现代的复杂…...

MySQL注入load_file常用路径

在MySQL注入攻击中&#xff0c;攻击者可能会尝试利用LOAD_FILE()函数来读取服务器上的敏感文件。LOAD_FILE()函数允许从服务器的文件系统中读取文件&#xff0c;并将其内容作为字符串返回。然而&#xff0c;这个函数需要满足一定的权限条件&#xff0c;并且文件路径必须是服务器…...

ubuntu20.04版本 快速安装 python3.11(宝宝级攻略)

1.前言 深度学习领域中&#xff0c;Python是首选编程语言&#xff0c;因此安装python进行深度学习是必要的&#xff0c;我在安装时踩过了一些坑&#xff0c;就想出一个宝宝级的攻略&#xff0c;希望能够帮助大家。 本宝宝攻略无论是在双系统下还是在虚拟机的环境下均能安装&a…...

DeepSeek AI 推出 Janus 自回归框架,统一视觉、文本理解与生成的创新解决方案

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…...

NORDIC nPM1100 是一款集成式电源管理

nPM1100 是一款集成式电源管理IC(PMIC)&#xff0c;采用2.1x2.1毫米WLCSP或4.0x4.0 毫米 QFN 封装 &#xff0c;内置线性模式锂离子/锂聚合物电池充电器。它采用高效DC/DC降压调节器&#xff0c;具有可配置的双模式 输出。 nPM1100是一款极其紧凑的PMIC器件&#xff0c;专为空间…...

深入RAG:知识密集型NLP任务的解决方案

在当今知识密集型任务日益增多的时代&#xff0c;如何有效地利用外部知识来增强语言模型的生成能力成为了一个重要的研究方向。RAG技术应运而生&#xff0c;通过从外部记忆源中检索相关信息&#xff0c;RAG不仅提高了模型生成的精准性和相关性&#xff0c;还解决了大型语言模型…...

vue-element-admin顶部导航栏的修改

基于vue-element-admin的顶部一级导航栏的调整&#xff0c;因为一级路由过多导致其他元素被挤到第二行&#xff0c;故现在将原来一级路由数组拆分成两个数组&#xff0c;第二个数组以子菜单显示 关键处调整代码 html <el-menu:active-text-color"variables.menuActiv…...

微信小程序 setData数据量过大的解决与分页加载的实现

我们经常使用setData方法来修改数据&#xff0c;从而达到更新页面的目的。但是当我们通过setData方法设置的数据过大时就会报如下错误。 vdSyncBatch 数据传输长度为 2260792 已经超过最大长度 1048576这是因为setData设置的数据量是有限制的&#xff0c;单次设置的数据大小不…...

体育动画直播嵌入方式以及作用

什么是体育动画直播&#xff1f; 体育动画直播是通过动画技术和实时数据&#xff0c;将体育赛事的进程以动态的方式展现出来。这种形式不仅可以实时呈现比赛的关键时刻&#xff0c;还能够将数据和信息以更生动、有趣的方式传达给观众。比如&#xff0c;在一场足球比赛中&#…...

腾讯云轻量服务器Lighthouse的前世今生

目录 序一、名字的由来二、Lighthouse的定位是什么&#xff0c;与CVM的差异化有哪些三、Lighthouse是如何实现简单易用的四、Lighthouse对于开发者有哪些具体的利好 序 印象中&#xff0c;腾讯云轻量应用服务器Lighthouse是在2020年正式上线的。 在其一经推出后&#xff0c;就…...

java实现redis的消息发送和消费,类似kafka功能

确保在 pom.xml 中添加了 Spring Data Redis 和 Jedis 的依赖。如下所示&#xff1a;<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <dependency&g…...

【软件设计】常用设计模式--代理模式

文章目录 代理模式&#xff08;Proxy Pattern&#xff09;1. 概念2. 模式结构3. UML 类图4.实现方式C# 示例步骤1&#xff1a;定义主题接口步骤2&#xff1a;实现真实主题步骤3&#xff1a;实现代理类步骤4&#xff1a;客户端使用代理模式输出结果&#xff1a; Java 示例步骤1&…...

生命与自由,抑郁的来源

在中国文学史上&#xff0c;有一句极其伟大的话&#xff0c;它点出了所有人痛苦的根源。它出自《我与地坛》&#xff0c;太阳它每时每刻即是夕阳也都是旭日&#xff0c;当他从这一段熄灭着走下山去&#xff0c;收尽苍凉参照之际&#xff0c;也正是它在另一端燃烧着爬上山巅布散…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...