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