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

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

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

:原生小程序开发:
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();
 },

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

结语:

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

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

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

相关推荐
说私域6 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的餐饮行业私域流量运营策略研究
人工智能·小程序·流量运营
2501_9159090611 小时前
Charles中文版使用教程 高效抓包与API调试常见问题处理
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张16 小时前
iOS软件性能监控实战指南 开发到上线的完整流程解析
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld18 小时前
剧本杀小程序系统开发:构建数字化剧本杀生态圈
大数据·小程序·剧本杀
落雪小轩韩1 天前
微信小程序性能优化与内存管理
微信小程序
徐礼昭|商派软件市场负责人2 天前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
胡西风_foxww3 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件
七七软件开发3 天前
一对一交友小程序 / APP 系统架构分析
java·python·小程序·系统架构·php
2501_916007473 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域3 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源