微信小程序获取指定元素,滚动页面到指定位置

微信小程序获取指定元素,滚动页面到指定位置

微信小程序获取指定元素的宽高等信息,并滚动页面到指定位置

:原生小程序开发:
createSelectorQuery() 创建一个选择器查询实例。
select('#target') 选择 id="target" 的元素。
boundingClientRect() 获取目标元素的位置。
wx.pageScrollTo() 用于滚动页面到指定位置。

javascript 复制代码
<view class="content">
  // 一些内容
  <view class="item" id="target">目标元素</view>
  // 更多内容
</view>
// 触发滚动
<button bindtap="scrollToElement">滚动到目标</button>
javascript 复制代码
// 微信小程序获取指定元素的宽高等信息,并滚动页面到指定位置
scrollToElement() {
   const query = wx.createSelectorQuery(); // 获取查询实例
   query.select('#target') // 获取目标元素
     .boundingClientRect((rect) => {
			console.log(rect,'rect')
       if (rect && rect.top) {
         wx.pageScrollTo({
           scrollTop: rect.top, // 滚动到目标元素的位置
           duration: 300,       // 滚动动画的持续时间
         });
       }
     })
     .exec();
 },

点击参考答案滚动到文本输入框位置

结语:

前端路上 | 所知甚少,唯善学。

各位小伙伴有什么疑问,欢迎留言探讨。

--- 关注我:前端路上不迷路 ---

相关推荐
lumi.25 分钟前
Swiper属性全解析:快速掌握滑块视图核心配置!(2.3补充细节,详细文档在uniapp官网)
前端·javascript·css·小程序·uni-app
咸虾米_1 小时前
解决getLocation获取当前的地理位置,报错:getLocation:fail auth deny及方法封装
微信小程序·uniapp·用户授权api
低代码布道师1 小时前
少儿舞蹈小程序需求规格说明书
低代码·小程序·规格说明书
IceyWu2 小时前
uniapp小程序 LivePhoto(实况图片)实现详解
微信小程序·uni-app
浩星6 小时前
react+taro打包到不同小程序
react.js·小程序·taro
Jun28119 小时前
微信小程序初探之数据绑定
微信小程序
顾辰逸you19 小时前
uniapp--咸虾米壁纸(三)
前端·微信小程序
大包子21 小时前
小程序分享(下载)海报随记
微信小程序
996幸存者21 小时前
下拉、上拉选择器 支持搜索、删除、自定义选择内容、任意对象字段映射
微信小程序·uni-app
diygwcom1 天前
AI实现超级客户端打印 支持APP 网页 小程序 调用本地客户端打印
小程序