//计算 scroll-view 的高度computeScrollViewHeight(){letthat=thisletquery=wx.createSelectorQuery().in(this)query.select('.title').boundingClientRect(function(res){//得到标题的高度lettitleHeight=res.height//scroll-view的高度 = 屏幕高度- tab高(50) - 10 - 10 - titleHeight//获取屏幕可用高度let...
先去获取屏幕的高度,然后通过减去除去scroll-view的其他块的固定高度,得到scroll-view的高度(刚开始我就是这么做的)。 Page({ data: { height: 0, }, onLoad: function () { let screenHeight = wx.getSystemInfoSync().windowHeight; this.setData({ height: screenHeight - 200, }); }, }); <view>...
使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height 微信文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height 所以,给scroll-view设置一个固定高度就可以了 方案1:js计算高度 实现原理: 通过js获取设备高...
方案2:使用flex布局 参考 文档 uni-app文档:https://uniapp.dcloud.net.cn/component/scroll-view.html 使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height 微信文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 使用竖向滚动时,需要给scroll-view一个固...
3. 在scroll-view中设置属性using-sticky为true 解决过程: 我想先观察它飘起来大概是从哪里开始。获取了下面元素的初始高度,观察下来大概是滚动距离超过下面元素初始高度后会飘。就是说,当scrollTop值大概超出需要sticky的元素再下面的元素高度时,这个sticky的元素大概就要飘了。
我将这个页面分成了三部分:最顶部的导航栏navbar,用于显示概要信息的header,以及本文的主角scroll-view。可见,scroll-view位于页面的最下方,如果我直接给它设定一个固定的高度,那么在不同尺寸的屏幕上,就可能会有高度过小而在下方留白,或者高度过大超出屏幕下边界的可能。那么,自动计算scroll-view的高度,看起来是一...
微信小程序中使用scroll-view时,一般都是需要自行设置高度,因为不设置的话,显示的老小了,但是设置高度的话给一个定值也不合适,一般在移动端上面,界面通常是正好铺面当前的屏幕的大小,代码 主要使用 calc这个计算 css 首先获取当前scroll-view组件在屏幕中位置 ...
众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到。 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用。布局复杂的时候谁还给你算高度啊。。。 一、布局分析,推导公式 先给个示例图: 这是一个稍微复杂点的页面,最上面是两个 tab 标签,每个标签的页面是一个子组...
众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到。 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用。布局复杂的时候谁还给你算高度啊。。。 一、布局分析,推导公式 先给个示例图: 这是一个稍微复杂点的页面,最上面是两个 tab 标签,每个标签的页面是一个子组...
2025-2-19 又重新看了这个问题,发现是最外层content 设置高度100%导致的,把100%改为100vh,然后 scroll-view 高度写死100% 即可,mounted动态计算高度可以直接忽略了 .content { height: 100%; } <template> <view class="content flex-column"> <view class="top-view flex-center" @tap="clickEvnet(0)...