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

参考


相关文章
|
5月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
5月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
9月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
1074 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
3557 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
3671 1
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
259 1
ly~
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
385 6
|
11月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
1201 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
12月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
902 3
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
3583 12

热门文章

最新文章