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

					<view v-if="isOpen === index && (item.subcategoryList && item.subcategoryList.length > 0)"
						class="sub-list">
						<view class="subitem" v-for="(suitem, subtitleIndex) in item.subcategoryList"
							:key="subtitleIndex" @tap="toDetails(suitem)">
							{{ suitem.title }}
						</view>
					</view>
          if (index == _this.sort) {
            _this.isOpen = index;
            this.$nextTick(function () {
              uni.pageScrollTo({
                selector: '.active',
                duration: 300,
                success: () => {
                  console.log('滚动成功');
                },
                fail: err => {
                  console.log('滚动失败:', err);
                }
              });
            })
          }
### 如何使用 `uni.pageScrollTo` 方法根据 ID 实现页面滚动定位 为了实现基于ID的页面滚动效果,可以采用如下方式: 在页面加载函数`onLoad`中获取传递过来的目标元素ID,并利用`uni.createSelectorQuery()`查询该元素的位置信息。一旦获得目标元素的具体位置(即相对于视口顶部的距离),就可以调用`uni.pageScrollTo()`来执行平滑滚动操作[^2]。 具体代码示例如下所示: ```javascript // 假定此段代码位于 destinationPage 页面的 onLoad 函数内 onLoad: function(options){ const toId = options.to; uni.createSelectorQuery().select(`#${toId}`).boundingClientRect((rect)=>{ if(!rect) return console.error('未找到对应元素'); uni.pageScrollTo({ scrollTop: rect.top, duration: 500 // 滚动动画持续时间设置为500毫秒 }); }).exec(); } ``` 另外一种更通用的方法是在任何地方触发滚动事件时都可以使用的封装好的函数形式[^3]: ```javascript changeTop(id) { let query = uni.createSelectorQuery().in(this); query.selectViewport().scrollOffset(); query.select(`#topic${id}`).boundingClientRect().exec((res)=>{ if(res.length !== 2 || !res[1]) return; let scrollToPosition = res[0].scrollTop + res[1].top - 5; // 调整最终到达位置的高度偏移量 uni.pageScrollTo({ scrollTop: scrollToPosition, duration: 500 // 设置滚动过渡时间为半秒钟 }); }) } ``` 值得注意的是,在某些情况下可能遇到`uni.pageScrollTo`不生效的问题。这可能是由于DOM更新延迟造成的;可以通过延时器稍作等待后再尝试调用滚动接口解决这个问题[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值