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

参考


相关文章
|
9月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
10月前
|
缓存 小程序 开发工具
最新原创uniapp+vue3仿微信界面聊天app系统
最新原创研发uniapp+vue3实战跨端仿微信App界面聊天程序。支持运行到H5+小程序+APP端。
454 6
最新原创uniapp+vue3仿微信界面聊天app系统
|
11月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
754 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
11月前
|
存储 人工智能 Android开发
为什么微信发送的APP安装不了,.apk转化为.apk.1
微信发送的APP文件常被改为.apk.1格式导致无法安装,推荐使用夸克或QQ浏览器解决。
1818 14
|
11月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
635 0
|
11月前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
996 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
消息中间件 缓存 小程序
婚恋交友相亲公众号app小程序系统源码「脱单神器」婚恋平台全套代码 - 支持快速二次开发
这是一套基于SpringBoot + Vue3开发的婚恋交友系统,支持微信公众号、Uniapp小程序和APP端。系统包含实名认证、智能匹配、视频相亲、会员体系等功能,适用于婚恋社交平台和相亲交友应用。后端采用SpringBoot 3.x与MyBatis-Plus,前端使用Vue3与Uniapp,支持快速部署和二次开发。适合技术团队或有经验的个人创业者使用。
904 8
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
2299 12
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
1117 1
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡