微信小程序 scroll

2024-05-26 13:37| 来源: 网络整理| 查看: 265

小程序中如何使用 scroll-into-view 滚动到对应位置上需求，需求很常见，如下图（电商网站很常见），在pc端或者h5中就是一个锚点，当点击对应标题时，页面滚动到对应位置，注意不是选项卡效果。。。。。是页面滚动

在这里插入图片描述如果不能理解，可随便打开一个电商网站的商品详情页可明白

**由于在小程序中，不能使用锚点，同时获取元素高度也挺麻烦的，这里采用 scroll-view 组件的 scroll-into-view属性，来实现 **

在这里插入图片描述

文档可发现，我们需要设置对应区域的id 即可完成滚动到对应位置

这里要注意一个问题，也是写此篇博客的目地，由于是滚动到对应区域可能有时会踩坑情况如下

假设页面高度 600px

导航是 100px（由于是当页面滚动一定距离时候才出现，所以采用了定位做法，固定在顶部）

scroll-view----->高度 100%

此时，直接使用 scroll-into-view 滚动到对应div区域，会发现部分被导航栏遮住，而我们需要的是下图结果

在这里插入图片描述

如图刚好在导航下方

这是由于 scroll-view----->高度 100%，且导航采用了定位，脱离文档流，滚动到对应视图区域时，自然就到达了顶部

此时，我们可以采用计算高度 + 定位

列表区域，高度为 100-距离顶部设置一个空div 高度为导航高度，动态控制----scroll-view往下挤一个导航高度

这个方法不太好，但是目前也想不出来其他的

【本文地址】

今日新闻