uni-app/微信小程序：scroll-view纵向滚动高度自适应flex布局填充剩余高度-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app/微信小程序：scroll-view纵向滚动高度自适应flex布局填充剩余高度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文档

uni-app文档：https://uniapp.dcloud.net.cn/component/scroll-view.html

使用竖向滚动时，需要给一个固定高度，通过 css 设置 height

微信文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height

所以，给scroll-view设置一个固定高度就可以了

方案1：js计算高度

实现原理：

通过js获取设备高度和外层父元素位置信息，动态计算出剩余高度，也就是scroll-view的高度

// 获取总高度
let screenHeight = uni.getSystemInfoSync().windowHeight;

// 布局位置信息
const query = uni.createSelectorQuery().in(this)
    query
      .select('#scroll-view')
      .boundingClientRect((data) => {
        // @ts-ignore
        console.log('得到布局位置信息' + JSON.stringify(data))
        // @ts-ignore
        this.height = `height:${data.height}px;`

      })
      .exec()

<scroll-view   
        v-if="height"
        :style="height"
        bindscrolltolower="scrolltolower" 
        scroll-y
>
</scroll-view>

js的方案有一个弊端，我实际获取布局信息的时候，并没有获取到元素的布局信息，而是获取到了整屏幕的高度

方案2：使用flex布局

该方案和小程序无关，是css的知识

使用flex纵向布局，让scroll-view占满剩余高度

布局示例

<view class="main">
    <view class="title"></view>

    <scroll-view
          scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-view"
          @scrolltolower="handleScrollToLower"
        >
        </scroll-view>
</view>

.main {
    height: 100%;
    display:flex;
    flex-direction: column; // 竖向排列
}

.title{
    height: 100rpx;
}

.scroll-view {
    flex: 1;    // 撑满剩余高度
    height: 0;  // 关键属性，否则scroll-view不生效
}