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

2023-09-27 07:52:33

感谢

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>

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

码农公寓

相关文章