微信小程序scroll-view中的坑(因为动态设置高度导致无法下拉)
感谢
https://blog.csdn.net/zhoulib__/article/details/107517651
微信小程序中使用scroll-view时,一般都是需要自行设置高度,因为不设置的话,显示的老小了,但是设置高度的话给一个定值也不合适,一般在移动端上面,界面通常是正好铺面当前的屏幕的大小,代码
主要使用 calc这个计算 css
首先获取当前scroll-view组件在屏幕中位置
像这样
data: { top:'', }, let query = wx.createSelectorQuery() query.select('.scroll-view').boundingClientRect((e) => { // console.log(e) this.setData({ top:e.top }) }).exec()
scroll-view组件
<scroll-view class="scroll-view" style="height:calc(100vh - {{top}}px);white-space:normal" scroll-x="{{false}}" refresher-enabled refresher-background="#F6F6F6" bindrefresherrefresh="pull" refresher-triggered="{{triggered}}" bindscrolltolower="scrolltolower" scroll-y > </scroll-view>
这样写的话会遇到一个scroll-view无法下拉的问题(因为top的设置是异步的,还有微信小程序的组件总是有这些奇奇怪怪的问题,因为是异步更新了组件所以可能会导致一些奇奇怪怪的问题,所以要条件渲染,在获取到top之后再渲染scroll-view,防止scroll-view的重复渲染,让整个流程看上去像是同步的,而不是异步的)
<view class="scroll-view"> <scroll-view wx:if="{{top}}" style="height:calc(100vh - {{top}}px);white-space:normal" scroll-x="{{false}}" refresher-enabled refresher-background="#F6F6F6" bindrefresherrefresh="pull" refresher-triggered="{{triggered}}" bindscrolltolower="scrolltolower" scroll-y > </scroll-view> </view>
破罐子互摔