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

简介: uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度

目录

文档

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

使用竖向滚动时,需要给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不生效
}

关键属性是height: 0,如果没有该属性,高度会溢出,不会出现滚动效果

还有一个注意的点,要一直向上检查父元素的高度都是height: 100%;

参考


相关文章
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
648 0
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
816 1
Axure App 垂直滚动
Axure App 垂直滚动
1311 0
|
小程序
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
884 0
|
XML Java Android开发
Android App开发动画特效之利用滚动器实现平滑翻页(附源码和演示 简单易懂)
Android App开发动画特效之利用滚动器实现平滑翻页(附源码和演示 简单易懂)
634 0
Android App开发动画特效之利用滚动器实现平滑翻页(附源码和演示 简单易懂)
|
小程序 前端开发 定位技术
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件
|
小程序 JavaScript
微信小程序学习笔记(3) -- 伸缩布局
微信小程序学习笔记(3) -- 伸缩布局
354 0

热门文章

最新文章