QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

百度小程序

小程序的锚链接

 admin  2022-11-15 10:02:30
网上搜了小程序锚链接很多都是用scroll-view实现,但是有时候我们 用到锚链接的时候,高度宽度都是不确定的,这就需要我们通过获取模拟节点来判断



小程序获取虚拟dom的方法是:swan.createSelectorQuery();
获取某个具体节点是:select('#target'))
获取某一类型的节点:selectAll(".title");
获取这个节点的信息:.boundingClientRect();获取成功会返回一个回调函数

那么获取某个节点的信息就可以写成
  1. swan.createSelectorQuery().selectAll(".bdParse-h2").boundingClientRect(rect=>{ 
  2.        console.log(rect) 
  3.  }).exec(); 
rect的打印结果是:


节点里边会返回给你这个节点上下左右的距离,有了这个距离我们就可以获取锚链接需要滚动的距离,但是有一点,这个距离顶部的距离是会变的,所以我们需要计算出来距离头部某个节点的相对距离,比如头部,当前节点的距离减去头部节点的距离,就是我们锚链接需要滚动的距离,

同理,获取顶部节点的方法是:
  1. swan.createSelectorQuery().select("#header").boundingClientRect(res=>{ 
  2.      console.log(res) 
  3.  }).exec(); 
打印结果:



这样我们就可以轻松实现锚链接了,完整代码如下:






¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《小程序的锚链接》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/xiaocheng/swan/922.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换
小程序插件

PHPcms小程序插件

phpcms小程序插件万能接口,支持一键授权登录

Pbootcms小程序插件

Pbootcms小程序插件,支持一键授权登录

迅睿cms小程序插件

xunruicms小程序插件,简单易学,专为小白设计

dedecms小程序插件

不需要php基础,只需要div+css就可,方便简单

添加微信好友

添加微信好友

微信小程序

百度小程序