uniapp计算scroll-view的剩余高度

uniapp使用scroll-view自动计算剩余高度

　　 　　　　 　　　　　　 　　　　　　　　内容... 　　　　　　 　　　　 　　

当一个小程序页面，顶部有搜索栏，或者分类查询时，我们想要保证它们能固定到顶部，就需要使用到Scrollview，那么如何确定Scrollview就是一个问题，这时我们可以使用以下代码来实现。先获取Scrollview距离顶部的高度，然后页面高度减去顶部距离，就能得到剩余的内容高度，如果底部还有操作条，那么我们再减去其高度，就能得到具体的Scrollview高度了。注意点是为了能准确的获取到页面元素，从而准确计算高度，我们需要将代码放到onReady生命周期里运行。

"> 测试高度 -->// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置。-- 测试高度会不会影响固定滚动，可以删除 -->label: '测试' + index,// 获取滚动容器css数据。

uniapp scroll-view 高度的问题，占剩余高度的计算。 1. 不能使用 css的calc()，这样是无效的。 2. 可以在onReady页面周期里面调用计算方法，其他地方调用会报错。

uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度 一，需求：如下图所示，当滚动条滚动到一定位置时要将红色框内的内容放到最顶部并且位置固定。 二，实现内容： ①需要获取滚动高度 ②滚动条触底时可请求下一页的数据 图片位置固定 三，代码实现 可使用uni app提供的页面生命周期方法onReachBottom和onPageScroll实现 在onPageScroll 函数中，e.scrollTop可获取页面滚动高度 使用onRe

我们经常需要做页面中部分内容可以滚动的功能，例如“猜你喜欢”，内容太多，通常都会超出屏幕，那么此块区域应该可以滚动，但是顶部的自定义导航栏应该不能随着滚动。 这个时候，就可以使用uniapp提供的滚动组件scroll-view。

【代码】uniApp获取页面滚动的高度。

模板js。

在uni-app使用中，有如下场景，页面有三个组件，top-bar顶部标题栏高度指定，bottom-bar底部功能菜单栏高度指定，scroll-view区域是一个scroll-view滚动区域，浏览聊天内容。要求scroll-view在这两个组件之间正常显示。 查阅官方文档，文档要求使用竖向滚动时，需要给<scroll-view>一个固定高度，但这个高度无法直接确定； 首先想到的方法是通过计算得出scroll-view的高度，使用100vh即视口高度，减去上下两个组件和手机状态栏的...

两种方案 实现： 变更 scroll-top的值即可 以竖向为例 1,指定位置为0-1的随机数，1px不容易看出来，一般场景足够，滚动到300位置可以用300 + Math.random()偏差很小，可以容忍 <scroll-view scroll-y="true" :scroll-top="scrollViewTop"> this.scrollViewTop = Math.random(); 2，结合@scroll事件一直监听，个人认为对性能是一种损耗 <scroll-view s

如图可见，在页面滚动过程中，顶部导航栏和底栏未动，仅中间的内容区域可滚动。自定义的顶部导航栏，可参考博文。

实现方法如下，经验证 APP 端和 H5端都可适用（易于看懂就直接上代码了），不管底部是有 tabbar 还是没有 tabbar 都兼容。4、后记：scroll-view的高度必须要设置，如果不设置，则滑动时只会带动整个页面一起滑动，如果设置过低则会导致底部留白。前言：点滴积累，贵在坚持。

scroll-view一键回到顶部