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

 

posted @ 2021-06-05 15:21  西瓜霜  阅读(1843)  评论(1编辑  收藏  举报