uniapp数据更新使用uni.pageScrollTo到不了指定的锚点

原创已于 2023-12-08 10:46:54 修改 · 881 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

于 2023-12-08 10:15:16 首次发布

文章讲述了在Vue应用中，使用`this.$nextTick`方法确保页面渲染完成后再执行uni.pageScrollTo函数，避免因提前操作未渲染完成的DOM导致的问题。

this.$nextTick(()=>{
                   uni.pageScrollTo({
                   selector: ".messg"
               })
           })

因为页面还没有渲染完成就执行了，加上nextTick就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zyk1036

关注关注

8
点赞
踩
9

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp - 适用于H5网页 | 小程序 | APP 的完美锚点功能插件，直接复制源码即可使用！类似选项卡点击自动跳转到指定DOM位置的效果！

高级前端工程师

03-29

7261

uniapp锚点跳转及滚动tab选项卡切换，uniapp利用scroll-view实现类似a标签锚点功能，uniapp锚点定位，uniapp点击选项卡滚动到指定的位置怎么做，uniApp实现滚动视图点击锚点跳转，uniapp如何实现点击菜单然后锚点跳转到固定可视区域，Uniapp实现锚点跳转和滚动监听，uni-app scroll-view + tab锚点定位，使用uniapp如何实现锚点定位和滚动监听功能，uniapp实现商品详情锚点定位效果，uni-app锚点跳转及滚动Tab切换(非scroll-vie

uniapp tab切换及tab锚点效果(wx小程序及H5端)

热门推荐

gun_kill_seven的博客

01-11

1万+

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

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

疏影横斜水清浅

11-29

2175

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

uni-app 表单校验失败，屏幕如何移到错误元素（第一个校验失败的表单元素）位置

guyywan_1314的博客

12-23

989

uni-app vue3.2 表单校验

uniapp的uni.pageScrollTo不生效

苦夏木禾

09-07

1713

2、可能是设置了高度的原因，把固定的高度去掉，请亲测有效。1、在外面套层定时器。

uniapp微信小程序pageScrollTo失效

starstarstarl的博客

02-27

2516

uniapp微信小程序，表单校验不通过时滚到对应位置，使用wx.pageScrollTo失效

scrollToSection('#scrollItem1') const scrollToSection = (selector: any) => { debugger // 创建选择器查询实例 const query = uni.createSelectorQuery() // 查询 container 的位置信息 query .select(selector) .boundingClientRect(function (rect: any) { debugger if (rect) { let top = rect.top uni.pageScrollTo({ scrollTop: top, duration: 300 }) } else { console.error(selector + ' does not exist') } }) .exec() }

09-19

你提供的代码是一个在 **uni-app 小程序中实现页面滚动到指定元素位置** 的典型用法，使用了 `uni.createSelectorQuery()` 和 `uni.pageScrollTo`。但目前存在几个关键问题导致它 **无法正常工作**，尤其是在不同...

uniapp handleMenuClick(index) { this.currentIndex = index this.loadContent(this.menuList[index].id) // 可添加滚动联动逻辑（如引用[2]的锚点定位） // uni.pageScrollTo({ selector: `#section${index}` }) }, async loadContent(menuId) { // 根据菜单ID加载内容（示例数据） this.contentList = [ { id: 1, text: "内容项1"}, { id: 2, text: '内容项2' } ] } 不能将类型“{ id: number; text: string; }”分配给类型“never”。

03-23

好的，我现在要解决用户遇到的UniApp中TypeScript类型错误：“{ id: number; text: string; }”不能分配给类型“never”。首先，我需要理解这个错误的原因。根据引用[1]，类似的错误通常发生在变量类型推断为“never...

uniapp pageScrollTo 不生效

王也的博客

04-11

2407

加setTimeout就正常了。

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

weixin_42234899的博客

06-27

2768

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

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

--=

04-23

4550

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

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

Xiaoweidumpb

10-23

526

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

uniapp uni.pageScrollTo h5 不生效

skx1007883564的博客

02-26

258

uniapp uni.pageScrollTo h5 不生效

uniapp app端 pageScrollTo不滚动问题

weixin_43886375的博客

07-07

1398

加一个延时装置可以给固定值也可以自己获取可视区域的高度。

uniapp onPageScroll监听页面滚动不起作用？解决方案

chenrui310的博客

08-17

4988

uniapp onPageScroll监听页面滚动不起作用？解决方案微信小程序页面滚动头部显示隐藏 VUE 监听对象属性值变化的三种方式

uniapp锚点跳转到指定位置

06-03

要在 Uniapp 中实现锚点跳转到指定位置，可以使用 `scroll-into-view` 组件。具体步骤如下： 1. 在要跳转到的位置添加一个 `id`，比如： ```html  <div id="target"></div> ``` 2. 在页面中添加一个按钮或链接，绑定一个点击事件： ```html <template> <view> <button @tap="scrollToTarget">跳转到目标位置</button>  <div id="target"></div> </view> </template> <script> export default { methods: { scrollToTarget() { uni.pageScrollTo({ selector: '#target', duration: 300 // 可选，默认300ms }) } } } </script> ``` 通过 `uni.pageScrollTo` 方法实现滚动到指定位置。注意：如果要在 `scroll-into-view` 组件中使用，只需要把 `selector` 替换成 `scroll-into-view` 即可。