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

小程序中,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.mzph.cn/web/62919.shtml

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

相关文章

php基础:命名空间

1.PHP 命名空间可以解决以下两类问题&#xff1a; 1.用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/常量之间的名字冲突。 2.为很长的标识符名称(通常是为了缓解第一类问题而定义的)创建一个别名&#xff08;或简短&#xff09;的名称&#xff0c;以提高源代码的可读…

分布式 CAP理论 总结

前言 相关系列 《分布式 & 目录》《分布式 & CAP理论 & 总结》《分布式 & CAP理论 & 问题》 分布式 分布式的核心是将大型业务拆解成多个子业务以使之在不同的机器上执行。分布式是用于解决单个物理机容量&性能瓶颈问题而采用的优化手段&#xf…

python xpath解析笔记

与bs4的区别 bs4有很多属性和方法&#xff0c;而xpath只有一个方法&#xff0c;是通过不同的xpath表达式实现很多功能的。 html例子 定位 tree.xpath(‘/html/head/title’) 返回列表。 开头的斜杠表示从根节点遍历。 中间的斜杠表示层级。&#xff08;相当于bs4中的>…

Q学习(Q-Learning)详解

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

树状数组详解

概述 树状数组&#xff08;Binary Indexed Tree&#xff0c;简称BIT&#xff09;&#xff0c;是一种数据结构&#xff0c;用于处理区间查询和更新问题。它是一种可以高效地在对数级别时间复杂度内进行单点更新和区间查询的数据结构。树状数组通常用于解决以下两类问题&#xf…

freeswitch(开启支持MCU视频会议,使用mod_av模块)

亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径(根据自己的路径进入) /usr/local/freeswitch/etc/freeswitch场景说明: 有些场景想使用视频会议MCU融合画面进行开会使用方法: 第一步:下载插件 yum install -y epel-release yum install

【大数据技术基础】【记录Ubuntu 16.04升级到18.04】Ubuntu的一个版本升级到另一个版本

在 Ubuntu 操作系统中进行软件更新和系统升级 Ubuntu Kylin 16.04 LTS 系统进行系统升级到 Ubuntu 18.04.6 LTS 版本 升级提示&#xff1a;系统弹出提示框&#xff0c;告知用户有新版本的 Ubuntu 可用&#xff0c;询问用户是否想要升级。 认证窗口&#xff1a;显示了一个认证…

这是一个vue3 + scss的数字滚动效果

介绍: 当数字变化时&#xff0c;只改变变化的数字位&#xff0c;其余的不变&#xff0c;可以递增、递减、骤变、负数也可以&#xff0c;但是样式要根据具体的项目需求去改&#xff1b; 效果1、增加数字&#xff1a; 效果2、减少数字&#xff1a; 使用方法&#xff1a; <te…

TortoiseGit的下载、安装和配置

一、TortoiseGit的简介 tortoiseGit是一个开放的git版本控制系统的源客户端&#xff0c;支持Winxp/vista/win7.该软件功能和git一样 不同的是&#xff1a;git是命令行操作模式&#xff0c;tortoiseGit界面化操作模式&#xff0c;不用记git相关命令就可以直接操作&#xff0c;读…

最新版Chrome浏览器加载ActiveX控件之Adobe PDF阅读器控件

背景 Adobe PDF阅读器控件是一个ActiveX控件&#xff0c;用于在Windows平台上显示和操作PDF文件。它提供了一系列方法和属性&#xff0c;可以实现对PDF文件的加载、显示、搜索、打印、保存等操作。 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件…

linux在没网的情况下如何校验时间 超详细拿来即用

一、没有校时服务器的话 1、手动修改 sudo date --set"2024-06-17 13:44:00"二、有校时服务器的话 1、手动校时 ntpdate 14.193.73.22、自动校时 写一个校时服务脚本 14.193.73.2 是校验时间服务器 #!/bin/sh while true dontpdate 14.193.73.2sleep 5;hwclock…

源码分析之Openlayers中的控件篇Control基类介绍

概述 Openlayers 中内置了9类控件&#xff0c;这9类控件都是基于Control类&#xff0c;而Control类则是继承于BaseObject类&#xff0c;如下图所示&#xff1a; 如上&#xff0c;这9类控件分别是&#xff1a; Attribution&#xff1a;属性控件FullScreen:全屏控件MousePositi…

计算机网络知识点全梳理(二.HTTP知识点总结)

目录 HTTP基本概念 HTTP优缺点 HTTP优点&#xff08;1.1&#xff09; HTTP缺点 HTTP与HTTPS HTTP 与 HTTPS 的区别 HTTPS 解决 HTTP 的哪些安全问题&#xff1f; HTTPS 如何解决安全问题&#xff1f; HTTPS 连接建立的过程&#xff1a; HTTP/1.1、HTTP/2、HTTP/3 演…

第P2周:Pytorch实现CIFAR10彩色图片识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标 实现CIFAR-10的彩色图片识别实现比P1周更复杂一点的CNN网络 具体实现 &#xff08;一&#xff09;环境 语言环境&#xff1a;Python 3.10 编 译 器: …

Quant connect的优势和不足,学习曲线难

Quant connect的优势和不足 Quant connect作为一个成熟的算法交易平台&#xff0c;具有许多优势&#xff0c;包括&#xff1a; 强大的回测功能&#xff1a;Quant connect提供了丰富的数据源和回测功能&#xff0c;可以对各种交易策略进行全面的回测和分析。 容易上手&#xf…

深入理解 Ansible Playbook:组件与实战

目录 1 playbook介绍 2 YAML语言 2.1语法简介 2.2数据类型 3 Playbook核心组件 3.1 hosts组件 3.2 remote_user组件 3.3 task列表和action组件 3.4 handlers 3.5 tags组件 3.6 其他组件说明 1 playbook介绍 playbook 剧本是由一个或多个"play"组成的列表。…

2024年食堂采购系统源码技术趋势:如何开发智能的供应链管理APP

本篇文章&#xff0c;小编将与大家一同探讨2024年食堂采购系统的技术趋势&#xff0c;并提供开发更智能的供应链管理APP的策略。 一、2024年食堂采购系统的技术趋势 1.人工智能与机器学习的深度应用 在2024年&#xff0c;AI和机器学习在食堂采购系统中的应用将更加普遍。这些…

代码随想录-算法训练营-番外(图论01:图论理论基础,所有可到达的路径)

day01 图论part01 今日任务:图论理论基础/所有可到达的路径 代码随想录图论视频部分还没更新 https://programmercarl.com/kamacoder/图论理论基础.html#图的基本概念 day01 所有可达路径 邻接矩阵 import java.util.Scanner;import java.util.List;import java.util.ArrayL…

系统架构的演变

什么是系统架构&#xff1f; 系统架构是系统的一种整体的高层次的结构表示&#xff0c;它确定了系统的基本组织、组件之间的关系、组件与环境的关系&#xff0c;以及指导其设计和发展的原则。随着技术的发展和业务需求的增长&#xff0c;系统架构经历了从简单到复杂、从集中到…

c++总复习

C 中多态性在实际项目中的应用场景 图形绘制系统 描述&#xff1a;在一个图形绘制软件中&#xff0c;可能有多种图形&#xff0c;如圆形、矩形、三角形等。这些图形都有一个共同的操作&#xff0c;比如绘制&#xff08;draw&#xff09;。通过多态性&#xff0c;可以定义一个基…