uniapp小程序的锚点定位(将页面滚动到目标位置)

news/2024/12/15 21:02:22/

小程序中,a页面跳转到b页面,跳转后滚动定位到b页面的特定位置。

  • 1.uni.pageScrollTo传递一个scrollTop参数可以滚动到特定位置。
  • 2.可以通过 uni.createSelectorQuery()等获取定位元素的位置信息。
  • 3.uni.getSystemInfoSync()获取设备的导航栏和状态栏高度。
  • 4.注意:scrollTop参数的值是2的top的值减去3的导航栏的高度和状态栏的高度。
  • 5.最后,需要注意使用定时器,等待页面渲染完毕,开始滚动。

直接上代码:下面是b页面的模板代码和js代码。

<template><div class="container"><div class="section a"></div><div class="section b"</div><div class="section c"></div><div class="section d"></div></div>
</template> 
onLoad(opt){// pos是a页面跳转携带的query参数。a,b,c,dconst pos = opt && opt.pos || '';// 获取手机系统相关的信息,是为了获取导航条和状态栏高度。const res = uni.getSystemInfoSync();// 获取需要定位的元素的坐标位置uni.createSelectorQuery().select(`.${pos}`).boundingClientRect(data => {// 此处的定时器,非常的重要,等待页面渲染完,然后滚动页面。// 需要除去 标题栏高度 和 状态栏高度setTimeout(()=>{uni.pageScrollTo({scrollTop: data.top - res.navigationBarHeight - res.statusBarHeight})}, 300)}).exec();}

http://www.ppmy.cn/news/1555408.html

相关文章

超高清监测护航风电叶片,铸就绿色能源新未来

中国是世界风电第一大国。 2023年&#xff0c;中国风电叶片市场规模约为442亿元。根据中商产业研究院分析师预测&#xff0c;2025年中国风电叶片市场规模将增长至562亿元。全球风电装机容量的不断扩容&#xff0c;无疑预示着风电叶片市场将持续保持旺盛态势。 风电叶片是风电…

Maven完整技术汇总

额外知识点 IDE IDE是集成开发环境的缩写&#xff0c;它是一种软件应用程序&#xff0c;提供了编码、调试和部署软件的一站式解决方案。这些功能集成在一起&#xff0c;使开发人员能够在一个环境中完成整个软件开发过程&#xff0c;从编写代码到调试和测试&#xff0c;直到最终…

最新全开源IM即时通讯系统源码(PC+WEB+IOS+Android)部署指南

全开源IM&#xff08;即时通讯&#xff09;系统源码部署是一个复杂但系统的过程&#xff0c;涉及多个组件和步骤。以下是一个详细的部署指南&#xff0c;旨在帮助开发者或系统管理员成功部署一个全开源的IM系统&#xff0c;如OpenIM。      IM即时通讯系统源码准备工作   …

【Linux】线程互斥 | 死锁 | 进程同步

文章目录 &#x1f449;线程互斥&#x1f448;互斥相关概念互斥量全局互斥锁局部互斥锁互斥锁的进一步认识互斥锁的实现原理 &#x1f449;可重入和线程安全&#x1f448;概念常见的线程不安全的情况常见的线程安全的情况常见不可重入的情况* 常见可重入的情况可重入与线程安全…

软件安全性测试有多重要?好用的安全测试工具有哪些?

在信息化快速发展的今天&#xff0c;软件安全性逐渐成为各个企业和个人关注的核心问题。随着网络攻击事件的频发&#xff0c;软件的安全性不仅直接关系到企业信息的安全&#xff0c;也极大地影响了用户的信任度和使用体验。 一、软件安全性测试的重要性体现在多个方面&#xf…

如何通过编译器标志增强移动应用的安全性

作为一名 Android 或 iOS 开发者&#xff0c;您可能已经熟悉一些常见的安全开发最佳实践&#xff0c;比如验证外部输入、合理管理内存以及避免使用弱加密算法。然而&#xff0c;即便是最精心编写的代码&#xff0c;也可能包含一些 bug&#xff0c;其中一些可能会导致可被利用的…

数据结构 ——二叉树转广义表

数据结构 ——二叉树转广义表 1、树转广义表 如下一棵树&#xff0c;转换为广义表 root(c(a()(b()()))(e(d()())(f()(j(h()())())))) (根&#xff08;左子树&#xff09;&#xff08;右子树&#xff09;) 代码实现 #include<stdio.h> #include<stdlib.h>//保存…

Scala记号字面值 空白与注释

记号字面值 语法&#xff1a; symbolLiteral :: „‟‟ idrest 记号字面值‟x 是表达式 scala.Symbol(“x”)的简写形式。Symbol 是一个 case 类(5.3.2)&#xff0c;定义如下&#xff1a; package scala final case class Symbol private (name: String) { override def toStri…