小程序，如何实现一个动态高度的scroll-view ？

  • Z时代
  • 2024-03-02
  • 分类：IT

小程序，如何实现一个动态高度的scroll-view ？

比如我有上下两块区域，top和bottom，两个里面都要放在scroll-view（防止容器里的内容过多）

top的高度不固定，但有最大高度 max-height

bottom的高度则是分配主屏幕除去top后剩余的高度（所以也是不固定的）

但是scroll-view 需要传入一个固定的高度才能实现，应该如何实现这样一个界面呢？

回答：

<scroll-view class="top-scroll" scroll-y style="height: {{topHeight}}px;max-height: 500rpx;">
    <view style="height: 600px;">top</view>
</scroll-view>
<scroll-view class="bottom-scroll" scroll-y style="height: {{bottomHeight}}px">
    <view style="height: 700px;">bottom</view>
</scroll-view>
Page({
  data: {
    topHeight: 'auto',
    bottomHeight: 'auto'
  },
  onReady() {
    wx.createSelectorQuery().select('.top-scroll').boundingClientRect(rect => {
      this.setData({
        topHeight: rect.height,
        bottomHeight: wx.getSystemInfoSync().windowHeight - rect.height 
      })
    }).exec()
  },
})

回答：

scroll-view 支持flex布局的

<view class="h-100vh flex flex-col">
<scroll-view class="max-h-30vh" scroll-y></scroll-view>
<scroll-view class="flex-1" scroll-y></scroll-view>
</view>

以上是 小程序，如何实现一个动态高度的scroll-view ？ 的全部内容， 来源链接： utcz.com/p/936458.html

回到顶部