微信小程序scroll-view中的坑（因为动态设置高度导致无法下拉）

微信小程序中使用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>