以下是几种常见的设置scroll-view高度的方法: 1. 使用固定高度 如果你知道scroll-view需要的确切高度,可以直接在样式中设置这个高度。例如: vue <template> <scroll-view class="scroll-view" scroll-y="true"> <!-- 滚动内容 --> </scroll-view> </template> <...
使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height 所以,给scroll-view设置一个固定高度就可以了 方案1:js计算高度 实现原理: 通过js获取设备高度和外层父元素位置信息,动态计算出剩余高度,也就是scroll-view的高度 // 获取总高度letscreenHeight=uni.getSystemInfoSync().windowHeight;// 布局位...
scroll-view占满整个屏幕,且scroll-view的滚动不影响到页面其他地方的滚动 在iphone6的尺寸下,scroll-view设置高度为1110rpx,就不会影响页面其他地方的滚动 但是当屏幕尺寸调至iphone5时,左边scroll-view的滚动,就会带动右边内容的滚动 而在iphone7 plus时,scroll-view不能占满整个屏幕 最后发现只需要将scroll-view的...
自定义的顶部导航栏,可参考博文 如图可见,在页面滚动过程中,顶部导航栏和底栏未动,仅中间的内容区域可滚动。 整个页面的高度设置为 100%,并采用 flex 布局 滚动区域的高度,通过flex布局的flex-grow实现自适配 <template> <!-- 顶部--自定义的导航栏 --> <CustomNavbar /> <!-- 中间--自适配高度的滚动区...
可以看到预览完全没问题,接下来往里面放一个滚动视图scroll-view,设置为可以垂直滚动,高度设置为100%样式 <viewclass='header'></view><viewclass='box'><scroll-viewclass='sv'scroll-y='true'style='height:100%;'><view>韦神和这位水友打了照面,这样近的距离下连开十枪,但居然全被这位水友完美躲过。连...
我们可以看到,我们初衷是希望上下两个固定,中间滚动,而现在是滚动到最下面,现在的效果并不是我们想要的。 这主要的原因在于我们设置了一个死的高度,这个高度超过了手机屏幕的高度,导致最下面的被挤占了。 获取手机高度 首先,不同的手机屏幕的尺寸不同,因此其高度不同,如果我们按照上面的写法,设置了死的高度,效果并...
目前碰到scroll-view相关的问题一般都可以直接定位到没设置高度(或宽度),要么是设置了无效。 如果是没设置高度或宽度还好说,直接设置个差不多的高度就搞惦了,最怕的就是设置后无效,还死活看不出来原因。 比方说像我,硬是要冒天下之大不韪作死设置了scroll-view的百分比高度%,然后就死了——高度无效,无法滚动。
场景一:布局中已知高度局部滚动 一般页面布局中某个模块需要局部滚动,以横向滚动更多,纵向滚动其实也类似。这个也是 scroll-view 最简单的用法,纵向滚动直接设置一个已知的固定高度 height 就行了,没啥难度。 场景二:整个布局上、中、下3个模块布局,中间局部滚动 ...
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。 横向滚动需打开 enable-flex 以兼容 WebView,如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/> ...
我们都知道在使用scroll-view组件纵向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height,但是在我之前的接触的一个小程序中,我把wxml文件中的最外层用<scoll-view/>包裹了,此时设置height为100%,但是没什么卵用,我又把height的单位改为px后scoll-view才有反应,网上各种百度之后,说是想要设置高度为...