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%;

参考


相关文章
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4006 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
4568 1
|
小程序 前端开发
生活商城app微信小程序模板源码
生活商城app微信小程序模板源码
334 6
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
455 0
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
2175 12
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
1337 3
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
4279 3
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
1199 1
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
1166 1
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
3946 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机

热门文章

最新文章