小程序定位到 胶囊的三个点大概中间

话不多说,先上效果图在这里插入图片描述
这个功能实现思路:

  1. 首先先拿到这一张整图(快捷,精确)
  2. 然后获取整个导航栏高度(自定义导航栏,非自定义导航栏忽略这一步)
  3. 获取三个点的做偏移量,把高度和偏移量给到一个定位到盒子,这个盒子里就放这个图片,然后给这个盒子再使用transform设置偏移量调整到一个合适的位置
    下面是代码步骤:
  <view class="tip" :style="[{ top: nav_height + 'px' }]"><!-- <view style="height:80rpx;background-color: yellow;"></view>放置别的模块 --><view class="care-box" v-if="dropToast"><view :class="['care',]" :style="[{left:dropOffset+'px'}]" @click.stop="()=>{}" :animation="animationData"><image class="care-bgc" src="xxx.png" /><view class="close-box" @click.stop="closeCare"></view></view></view></view>
	// 获取顶部导航栏getNav(){const system = wx.getSystemInfoSync()const res = uni.getMenuButtonBoundingClientRect()const statusHeight = res.top //胶囊距离顶部const navHeight = res.height //胶囊高度// 胶囊顶部距离状态栏的距离(等同于胶囊底部与页面顶部的距离)const spacing = res.top - system.statusBarHeight// 页面纵标的起始位置const pageStart = res.bottom + spacing// 根据需要多几个px偏移量this.nav_height = pageStart + 3 + 'px'console.log(pageStart)}// 获取三个点中间的那个左偏移量getOffSet() {const rect = wx.getMenuButtonBoundingClientRect();const drop = Math.floor(rect.width/2/2)this.dropOffset = rect.left + drop},	
    .tip {position:fixed;left:0;right:0;z-index: 999;}.care-box {position: relative;width: 100%;display:flex;transform: translateY(10rpx);.care {position: absolute;bottom:0;transform: translate(-55%,90%);opacity:0;margin-right:12rpx;.care-bgc {width: 286rpx;height: 83rpx;}.close-box {position: absolute;z-index: 11;top: 10rpx;right: 0rpx;width: 50rpx;height: 40rpx;}}}

end !

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

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

相关文章

【C语言】扫雷游戏(可展开)——超细教学

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;C语言 &#x1f525;该篇将运用数组来实现 扫雷游戏。 目录&#xff1a; &#x1f31f;思路框架测试游戏 &#x1f31f;测试部分函数实现&am…

【0824作业】C++ 拷贝赋值函数、匿名对象、友元、常成员函数和常对象、运算符重载

一、思维导图 二、作业&#xff1a;实现关系运算符的重载 关系运算符重载 概念&#xff1a; 种类&#xff1a;>、>、< 、< 、 、!表达式&#xff1a;L#R (L表示左操作数&#xff0c;R表示有操作数&#xff0c;#表示运算符)左操作数&#xff1a;既可以是左值也可以…

tcl学习之路(五)(Vivado时序约束)

1.主时钟约束 主时钟通常是FPGA器件外部的板机时钟或FPGA的高速收发器输出数据的同步恢复时钟信号等。下面这句语法大家一定不会陌生。该语句用于对主时钟的名称、周期、占空比以及对应物理引脚进行约束。 create_clock -name <clock_name> -periood <period> -wa…

学习JAVA打卡第三十八天

String 类的常用方法 ⑴public int length&#xff08;&#xff09; String 类中的length&#xff08;&#xff09;方法获取了一个String对象的字符序列的长度&#xff0c;例如&#xff1a; String china “1945年抗战胜利”&#xff1b; int n1,n2&#xff1b; n1china.leng…

python并发编程

一、程序提速的方法 二、python对并发编程的支持 多线程&#xff1a;threading&#xff0c;利用CPU和IO可以同时执行的原理&#xff0c;让CPU不会干巴巴等待IO完成&#xff1b;多进程&#xff1a;multiprocess&#xff0c;利用多核CPU的能力&#xff0c;真正的并行执行任务&am…

数据结构入门 — 链表详解_单链表

前言 数据结构入门 — 单链表详解* 博客主页链接&#xff1a;https://blog.csdn.net/m0_74014525 关注博主&#xff0c;后期持续更新系列文章 文章末尾有源码 *****感谢观看&#xff0c;希望对你有所帮助***** 系列文章 第一篇&#xff1a;数据结构入门 — 链表详解_单链表 第…

pycharm远程连接docker容器

pycharm远程连接docker容器 1.根据镜像创建容器2.进入容器3.修改容器的root密码4. 容器安装openssh-server和openssh-client5.修改SSH配置文件6.重启ssh服务7. 退出测试8.配置pycharm并连接docker容器9. 选择docker环境 1.根据镜像创建容器 sudo docker run -itd --nameconn_t…

Spark Standalone环境搭建及测试

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 篇一&#xff1a;Linux系统下配置java环境 篇二&#xff1a;hadoop伪分布式搭建&#xff08;超详细&#xff09; 篇三&#xff1a;hadoop完全分布式集群搭建&#xff08;超详细&#xf…

【Unity3D赛车游戏】【三】如何将汽车进入驱动模式——四驱,二驱转换

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Linux服务——http协议及nginx服务

目录 一、HTTP协议 1、跨网络的主机间通讯方式 套接字相关的系统调用 2、HTTP协议访问网站的过程 3、http协议状态码分类 常见的http协议状态码 4、MIME 5、URL组成 6、HTTP协议版本 7、系统处理http请求的工作模式 8、apache与nginx的区别 二、I/O模型 I/O模型相关…

建议收藏|软考机构推荐看这一篇就够了

需要最近因为软考改革成机考&#xff0c;大家都在问还有没有必要找机构学&#xff1f;本来已经进入自学阶段的考生&#xff0c;也纷纷开始慌张机考改革会不会影响考试难度&#xff1f;今天胖圆给大家总结一下软考要不要报机构&#xff1f;市面上的软考培训机构如何选择&#xf…

使用Xshell7控制多台服务同时安装ZK最新版集群服务

一: 环境准备: 主机名称 主机IP 节点 (集群内通讯端口|选举leader|cline端提供服务)端口 docker0 192.168.1.100 node-0 2888 | 3888 | 2181 docker1 192.168.1.101 node-1 2888 | 388…

共享数据-vue3

vuex方案 安装vuex4.x 两个重要变动&#xff1a; 去掉了构造函数Vuex&#xff0c;而使用createStore创建仓库 为了配合composition api&#xff0c;新增useStore函数获得仓库对象&#xff1b;获取路由对象使用useRouter global state 由于vue3的响应式系统本身可以脱离…

【Python】强化学习:原理与Python实战

搞懂大模型的智能基因&#xff0c;RLHF系统设计关键问答 RLHF&#xff08;Reinforcement Learning with Human Feedback&#xff0c;人类反馈强化学习&#xff09;虽是热门概念&#xff0c;并非包治百病的万用仙丹。本问答探讨RLHF的适用范围、优缺点和可能遇到的问题&#xff…

【腾讯云 TDSQL-C Serverless 产品测评】“橡皮筋“一样的数据库『MySQL高压篇』

【腾讯云 TDSQL-C Serverless 产品测评】"橡皮筋"一样的数据库 活动介绍服务一览何为TDSQL &#xff1f;Serverless 似曾相识&#xff1f; 降本增效&#xff0c;不再口号&#xff1f;动手环节 --- "压力"山大实验前瞻稍作简介资源扩缩范围&#xff08;CCU&…

19篇ICCV 2023自动驾驶精选论文解析 | 涵盖3D目标检测、语义分割、点云等方向

ICCV 2023榜单上月已出&#xff0c;今年共收录了2160篇论文&#xff0c;这次是精选了今年ICCV 2023 会议中自动驾驶相关的最新论文来和大家分享&#xff0c;涵盖了3D目标检测、BEV感知、目标检测、语义分割、点云等方向&#xff0c;共19篇。 论文原文以及开源代码文末领取&…

8_分类算法-k近邻算法(KNN)

文章目录 1 KNN算法1.1 KNN算法原理1.2 KNN过程1.3 KNN三要素1.4 KNN分类预测规则1.5 KNN回归预测规则1.6 KNN算法实现方式&#xff08;重点&#xff09;1.7 k近邻算法优缺点 2 KD-Tree2.1 KD Tree构建方式2.2 KD Tree查找最近邻2.3 KNN参数说明 1 KNN算法 定义&#xff1a;如…

开悟Optimization guide for intermediate tracks

目录 认识模型 参考方案&#xff08;按模块拆解&#xff09; 认识模型 模型控制1名英雄进行镜像1 v 1对战 Actor集群资源为64核CPU 问题特点&#xff1a;单一公平对抗场景&#xff08;同英雄镜像对赛&#xff09;&#xff0c;单位时间样本产能低&#xff0c;累计训练资源相…

基于OpenCV实战(基础知识一)

目录 简介 1.计算机眼中的图像 2.图片的读取、显示与保存 3.视频的读取与显示 简介 OpenCV是一个流行的开源计算机视觉库&#xff0c;由英特尔公司发起发展。它提供了超过2500个优化算法和许多工具包&#xff0c;可用于灰度、彩色、深度、基于特征和运动跟踪等的图像处理和…

JMeter性能测试(中)

断言 让程序自动判断预期结果和实际结果是否一致。 响应断言 例子2&#xff1a;可以在同一个HTTP请求下包含多个响应断言 例子1&#xff1a; 步骤; 添加线程组添加HTTP请求添加响应断言 测试字段&#xff1a;要检查的项&#xff08;实际结果&#xff09;模式匹配规则&#…