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,d
    const 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();
  }

posted @ 2024-12-14 11:30 SHENHUANJIE 阅读(82) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· UNI-APP + Spring Boot 实现小程序手机号登录

· UNI 多端文件下载实现方案

· uni-app中使用锚点定位

· 2022-12-07 小程序滚动到指定位置【转载】

· 锚点滚动定位

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类

公告

昵称： SHENHUANJIE
园龄： 13年5个月
粉丝： 2
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

一直在路上。。。

成长没有捷径可走。需要的是一个一个坚实的突破。

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

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (24)

随笔档案 (100)

相册 (2)

阅读排行榜

推荐排行榜

	<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,d
	const 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();
	}