uniapp 页面滑动到顶部，滑动到底部，页面滑动到指定位置uni.pageScrollTo

最新推荐文章于 2024-12-14 11:30:36 发布

原创最新推荐文章于 2024-12-14 11:30:36 发布 · 2.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

unicloud教程专栏收录该内容

77 篇文章

订阅专栏

本文介绍了如何在基于某种IT技术（如uni-app或类似框架）的项目中，通过调用uni.pageScrollTo函数，设置页面滚动到顶部，并控制动画时长为0毫秒以实现快速定位。

uni.pageScrollTo({
							scrollTop: 0, // 将滚动位置设置为顶部
							duration: 0 // 滚动到顶部的动画时长，单位为毫秒
						});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

星辰漫步者

关注关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

uniapp中使用pageScrollTo让页面滚动到固定节点或距离

疏影横斜水清浅

11-29

2190

uniapp中使用pageScrollTo让页面滚动到固定节点或距离

uniapp将页面滚动到目标位置

Smile_ping的博客

06-28

6538

uniapp将页面滑动到目标位置或返回顶部的两种实现方式...

参与评论您还未登录，请先登录后发表或查看评论

uniapp开发app解决uni.pageScrollTo不生效

gun_kill_seven的博客

01-11

1万+

使用uni.pageScrollTo让页面滚动到最底部，用了好多方法，定时器呀、this.$nextTick呀都发现设置无效，最后发现这种方式可以解决最外层wrapper设置 height:auto!important就可以啦 .wrapper{ height:auto!important; } ...

uniapp返回顶部的方法

weixin_44600235的博客

12-12

1162

解决办法 1.删除项目中的node_modules文件夹 2.在项目终端重新安装依赖，npm install 如果安装中间出现这样的问题，运行 npm audit fix来修复他们,如下图安装完成之后如果有下面这句代码require（“vue/types/umd”）就要注释掉 3.重新启动 ...

uniapp 页面滚动到指定位置的方法

--=

04-23

4599

uniapp 页面滚动到指定位置的方法

uni-app 滚动到指定位置

qq_36529240的博客

05-10

5186

方法二使用uni.pageScrollTo 使页面纵向滚到到指定位置。无法滚动将代码放在setTimeout，nextTick里执行。方法1：使用标签，可以将页面横向（或纵向）滚动到指定位置。建议设置height为auto :height:auto。

精选资源

uniapp 仿抖音上下滑动视频.zip

03-12

【uniapp 仿抖音上下滑动视频】在移动应用开发领域，uniapp是一个备受瞩目的框架，它允许开发者使用一种语言编写代码，然后跨多个平台（包括iOS、Android、H5以及小程序）进行部署。本项目是基于uniapp实现的一个...

uniapp可滑动的顶部导航

兄弟连之一个前端小白的成长

03-15

1万+

1.刚开始接触uniapp的时候一直纠接这个导航栏滑动的问题。今天抽空把有用的部分提拉出来。做个小笔记。 <template> <view class="container"> <view class="status_bar" v-bind:style="{ height: statusBarHeight }"></view>

精选资源

uniapp滑动周组件

07-08

uniapp滑动周组件

uniapp 实现左右滑动切换页面

m0_66809960的博客

07-19

3110

方案一切换的是组件页面，适用于各种场景，但比较繁琐，不够简洁，不想看的小伙伴可直接看方案二！另外还可以通过scroll-view实现触底加载，以及下拉刷新。方案二vue2.0完整代码。

使用uniapp.pageScrollTo方法进行页面滚动

weixin_42234899的博客

06-27

2860

使用uniapp.pageScrollTo方法进行页面滚动

uniapp页面滚动到页面可指定位置

qq_38188762的博客

09-02

4541

//滚动到指定位置 ScrollPosition(){ let that = this; uni.createSelectorQuery().select(".top-comment").boundingClientRect(function(res){//定位到你要的class的位置 console.log("标签获取====>",typeof(res.top)) uni.pageScrollTo({ scrollT.

uniapp开发中的uni.pageScrollTo()页面滚动

热门推荐

qq_40868156的博客

08-21

1万+

**uni.pageScrollTo()**是页面级滚动（整个页面滚动），不是页面内某个区域滚动，即页面内某个容器内部滚动。用法如下： setTimeout(() => { uni.pageScrollTo({ duration: 100, scrollTop: 100 //滚动高度，单位px，这里也可用选择器属性:selector:选择器 }) },50) 区域滚动一般用scroll-view标签，必须设置高，其属性：scroll-top，可以绑定一个高度值，通过修改这个属性值，实现s

uniapp设置滚动条滚动到指定位置

黎小小的博客

06-16

1万+

场景：左侧菜单栏，每次切换时，需要右侧商品展示区保持滚动条及页面在最顶部。

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

一直在路上

12-14

2140

小程序中，a页面跳转到b页面，跳转后滚动定位到b页面的特定位置。直接上代码：下面是b页面的模板代码和js代码。

uniapp 页面滚动到指定位置

MAIMIHO的博客

02-27

2889

<view id="container"> <view id="target"> </view> </view> uni.createSelectorQuery() .select(".container")//对应外层节点 .boundingClientRect((container) => { uni.createSelectorQuery() .select("#target")//目标节点

uniapp 滚动页面到指定位置

weixin_58421147的博客

03-01

3815

uniapp 点击滚动页面到指定位置

uniapp滚动到页面指定位置

weixin_68819400的博客

06-27

363

【代码】uniapp跳转到页面指定为止。

uni-app uni.pageScrollTo 跳转对应节点，目标位置

Xiaoweidumpb

10-23

535

【代码】uni-app uni.pageScrollTo 跳转对应节点，目标位置。

uniapp 点击滑动到底部

最新发布

01-01

### 实现 uniapp 中点击按钮后页面滑动到底部为了实现在 UniApp 应用中点击按钮使页面自动滚动至底部的效果，可以利用 `uni.pageScrollTo` API 来完成这一功能。此方法允许开发者指定要滚动的位置以及动画执行的时间。下面是一个具体的实现方式： #### HTML 部分定义一个按钮用于触发滚动操作： ```html <template> <view class="content">  <button @click="scrollToBottom">点击我滚动到最下方</button> </view> </template> ``` #### JavaScript 方法部分编写处理函数，在其中调用 `pageScrollTo` 接口并设置参数以达到平滑滚动的目的： ```javascript export default { methods: { scrollToBottom() { const query = uni.createSelectorQuery().in(this); query.select('.content').boundingClientRect(data => { if (data) { let windowHeight = data.height; uni.pageScrollTo({ scrollTop: windowHeight, duration: 300 // 动画持续时间(ms)，可根据需求调整 }); } }).exec(); } } } ``` 上述代码片段展示了如何监听 `.content` 容器的高度，并据此计算出整个视窗应该滚动的距离，从而确保能够顺利到达页面的最底端[^1]。需要注意的是，如果页面内存在其他可滚动组件（如 `scroll-view`），则可能会影响全局页面滚动行为；因此建议避免在同一页面混合使用不同类型的滚动容器[^4]。另外一种方案是在特定场景下直接获取当前屏幕高度作为目标位置来进行滚动，但这通常不如基于实际布局尺寸更精确可靠。