上周改一个 uni-app 项目产品要求在底部弹出一个选择面板固定占屏幕大约六成高度里面塞一长串可滚动的城市列表。我第一反应是翻uni-popup的文档找height属性——uView 的弹出层组件里根本没有这一项。给组件标签直接写styleheight: 600rpx屏幕上纹丝不动写:height600控制台直接飘红。折腾了大半个小时才想明白uview 的 uni-popup 从一开始就没打算让你从外面控制高度它把盒子的尺寸交给了内部内容去撑。这篇就把我这一路试出来的四种改高度办法、每种办法的适用边界以及小程序端那些文档里没写的坑一次性讲清楚。不管你是刚上手 uview 的新手还是写过好几个弹层的老手看完至少能少走两小时的弯路。1. 先搞明白uview 的 uni-popup 为什么设不了高度1.1 从组件结构看高度不归标签管要解决一个组件设不了某属性的问题最省时间的做法不是搜博客而是打开node_modules/uview-ui/components/u-popup/u-popup.vue或者你项目里uni_modules/uview-ui/components/u-popup/u-popup.vue看一眼源码。这个文件不长结构大致是这样的最外层是一个view classu-popup里面套一个遮罩层再里面是view classu-popup__content真正的内容通过默认插槽塞进u-popup__content里。关键就在这一步你在组件标签上写的style或者class最终落点是最外层的.u-popup而.u-popup是一个position: fixed铺满全屏的容器它的职责是定位遮罩和内容本身高度永远是 100%。你把height: 600rpx写到.u-popup上等于给一个铺满屏幕的透明背景层设了个高度视觉上自然没有任何变化。真正决定弹层长多高的是.u-popup__content而这个节点是组件的内部节点从外面直接传 style 到不了它身上。想通这一层后面所有方案就都是一句话想办法把高度写到.u-popup__content上或者写到它内部的第一个子元素上。前者要靠透传能力后者只要有插槽就能做。1.2 五种 mode 下高度的默认表现完全不一样很多人以为uni-popup就是从下面滑上来其实它有五种模式mode取值分别是top、bottom、left、right、center。这五种模式下内容盒子的尺寸策略完全不同直接决定了你改高度的难度bottom和top内容盒子宽度铺满高度由内容撑开同时有一个隐性的最大高度限制通常接近视口高度。这是最常用的两种也是改高度需求最集中的场景。left和right内容盒子高度铺满宽度由内容撑开一般会给一个默认宽度。你要改的是宽度而不是高度。center内容盒子宽高都由内容撑开四周留白居中显示。想固定尺寸比bottom还麻烦一点因为它还有一个negativeTop之类的位移选项在干扰视觉。我遇到过最典型的误判是有人想在center模式下设高度结果把mode换成了bottom才好使——其实不是bottom更好用而是center模式下内容盒子是inline-block类的收缩盒撑开逻辑不同。所以动手之前先确认你的mode再谈高度。1.3 小程序端的样式隔离让 deep 选择器时灵时不灵如果你是从 H5 或者 Vue 项目转过来的第一反应大概率是写深度选择器/* 这种写法在 H5 端常见但小程序端别指望 */ ::v-deep .u-popup__content { height: 60vh; }在 H5 端这段样式确实能生效因为浏览器里所有 DOM 都在同一棵树里编译出来的[data-v-xxxx] .u-popup__content能精准命中。但编译到小程序之后情况变了uView 组件会被编译成一个独立的自定义组件小程序默认开启样式隔离isolated父级页面的样式根本进不去子组件内部。你写的.u-popup__content规则会被当成页面里不存在的类名直接丢弃控制台不会有任何报错你只会看到高度没生效。注意不要因为 H5 上调通了就以为方案成立。多端项目里以小程序端为准做判断否则上线后就是一地鸡毛。这个坑我吃了不止一次。后来我干脆定了个规矩凡是需要穿透到 uView 组件内部节点的样式一律不用 deep 选择器做主方案只当应急手段并且用条件编译明确标出只对 H5 生效。1.4 1.x 和 2.x 的属性差异别照抄老博客网上关于uni-popup的文章有很大一部分是 uView 1.x 时代的属性名和 2.x 对不上照抄必然踩空。最明显的两处差异对比项uView 1.xuView 2.x控制显示:popuptrue:showtrue模式参数modemode圆角border-radius相关写法:round10自定义样式customStyle字符串形式较多customStyle对象形式安全区safeAreaInsetBottomsafeAreaInsetBottom注意popup和show这一组。我见过一个同事照着 2019 年的文章写:popupshow在 2.x 项目里死活弹不出来查了半天以为是 z-index 被别的组件盖住了。所以看老资料的时候先看一眼版本号或者干脆打开自己项目里的u-popup.vue翻到props那一段五分钟能省你两小时。2. 四种改高度的路子我在项目里怎么挑2.1 内容包裹层最稳、跨端一致我的默认选择做法极其朴素在u-popup的插槽里第一个元素不是你的业务内容而是一个自己写的view classpopup-body把高度写在这个 view 上。u-popup :showshow modebottom :round16 closeshow false view classpopup-body !-- 业务内容放这里 -- view v-foritem in list :keyitem.id{{ item.name }}/view /view /u-popup.popup-body { height: 60vh; box-sizing: border-box; overflow: hidden; }为什么我把它当默认方案因为它不依赖任何版本特性不依赖样式穿透H5、微信小程序、各家小程序、App 端编译结果全都一致。高度写在你自己能控制的节点上出问题也容易排查。唯一的代价是多了一层 view需要多写一行样式但这点成本换来的稳定性太值了。这里有个细节box-sizing: border-box一定要加。因为后面你要给这个容器加内边距做安全区适配如果不加padding-bottom会叠加在60vh之上实际高度变成60vh padding底部就会多出一截白边或者被顶出屏幕。2.2 customStyle 透传够用但别把它当唯一手段uView 2.x 的u-popup提供了一个customStyle属性注释是用户自定义样式对象形式。它的原理是把这个对象通过:style绑定到组件内部的容器节点上。理论上你可以这样写u-popup :showshow modebottom :custom-style{ height: 60vh, overflow: hidden } view内容/view /u-popup这条路子看起来最正统不用包一层 view也不用穿透。但我把它排第二位原因是不同小版本上customStyle挂载的节点不一样。有的版本挂在内层u-popup__content上高度能生效有的版本挂在更外层的定位容器上写了也是白写。我就遇到过一次升级 uView 之后原本正常的弹层高度突然失效的情况最后定位到是新版本改了样式挂载节点。所以我的建议是用之前先在真机上跑一下确认当前版本能生效并且在代码里写一句注释标明依赖的 uView 版本号。这样半年后别人接手或者你自己升级依赖时能第一时间想到问题出在哪。2.3 深度选择器H5 的应急手段别当主方案前面说过小程序端有样式隔离。但如果是纯 H5 项目深度选择器是可行的而且不用改模板结构/* 只在 H5 生效用条件编译圈起来 */ /* #ifdef H5 */ ::v-deep .u-popup__content { height: 60vh; overflow: hidden; } /* #endif */用#ifdef H5包起来的好处是编译到其他端时这段样式会被整个剔除不会留下无效代码也避免未来有人误以为它在小程序上生效。我在维护一个老项目时就是这么干的因为那个项目的模板层动不了涉及一堆历史包袱只能从样式上想办法。注意任何穿透到组件内部的选择器都属于和第三方组件的内部实现耦合。一旦 uView 在某个版本改了类名.u-popup__content改成别的这段样式会静默失效不会报错。所以一定要在注释里写清楚它依赖的类名方便后续排查。2.4 maxHeight 思路不设死高度只给个上限还有一种需求其实不是我要它固定多高而是内容多的时候别超过屏幕。这种场景不该去写死height而应该给容器一个max-height.popup-body { max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }内容少的时候容器自然收缩看起来干净内容多的时候到 80vh 封顶内部滚动。实测这个方案在内容长度不确定的场景比如接口返回的列表条数不固定里体验最好比写死一个60vh、结果只返回两条数据时底下留一大片空白要自然得多。四种方案的横向对比我整理成了一张表选型的时候直接看这张方案跨端可靠性实现成本适用场景主要风险内容包裹层高全端一致低多一层 view绝大多数场景无customStyle中看版本低不想改模板结构版本升级后失效深度选择器低仅 H5低H5 老项目应急类名变更后静默失效maxHeight高全端一致低内容长度不确定需配合滚动处理3. 动手改把底部弹出层做成固定高度加内部滚动3.1 第一步确定高度值用 vh 而不是 rpx先说单位选择。很多人条件反射用rpx因为小程序里rpx好用。但对弹层高度来说rpx有个致命问题rpx是按屏幕宽度等比换算的屏幕越宽600rpx的绝对高度越大。在 iPad 或者横屏手机上一个60vh看起来合理的弹层用1200rpx写死之后可能只占屏幕的三分之一。所以高度我坚持用vh。vh是视口高度百分比在任何设备上都占同样比例。如果必须换算成rpx比如设计稿给的就是rpx可以用这个公式目标高度(rpx) 设计稿高度比例 × 750 × (屏幕高度 / 屏幕宽度)但这个公式里屏幕高度/屏幕宽度是变的所以换来换去最后还是回到vh最省心。我的做法是容器高度用vh内部间距、圆角、字号用rpx各取所长。还有一个容易忽略的点小程序里的vh对应的是 webview 的可视区域高度。如果你的页面用了自定义导航栏那这段高度是包含导航栏所占空间的弹层从底部升起时视觉比例会和你预期有偏差。稳妥的做法是扣掉这一部分.popup-body { height: calc(100vh - var(--nav-bar-height, 88rpx) - 40vh); }把导航高度抽成 CSS 变量在App.vue或者全局样式里根据uni.getSystemInfoSync()的结果动态赋值页面里各处复用。这样一来微信小程序顶部导航栏高度的变化、不同机型状态栏高度的差异都收敛到一个变量里管。3.2 第二步安全区适配要算进去别让内容被 Home 条盖住iPhone 底部有一条 Home Indicator安卓阵营也有类似的虚拟导航条。如果弹层贴着屏幕底边内容最后一行就会被盖住。uView 的u-popup有一个safeAreaInsetBottom属性默认开启它的作用是在内容底部补一段安全区间距。但这里有个陷阱当你自己给容器设了固定高度安全区的 padding 会被算进这个高度里挤压真实内容的可用空间。我的处理方式是关掉组件自带的安全区自己在包裹层上算.popup-body { height: 60vh; box-sizing: border-box; padding-bottom: calc(20rpx constant(safe-area-inset-bottom)); padding-bottom: calc(20rpx env(safe-area-inset-bottom)); }两行padding-bottom不是重复是兼容写法constant()给老版本 iOS 用env()给新版本用浏览器会按支持情况取最后一条生效的。20rpx是自己留的呼吸间距env(safe-area-inset-bottom)是设备真实的安全区高度。注意如果你同时开着组件的safeAreaInsetBottom又自己写了一遍 padding底部会变成双倍间距看起来非常怪。二选一别两头都做。3.3 第三步scroll-view 的高度必须给确定值这是整个流程里最容易翻车的一步。很多人把列表换成scroll-view scroll-y之后就发现滚不动然后开始怀疑是不是scroll-y没加、是不是需要enhanced属性——其实 90% 的情况是父级没有确定高度。scroll-view的高度计算逻辑是需要一个明确的、可计算的容器高度作为参照。如果父级是height: auto那scroll-view的height: 100%就等于100% 的 undefined最终高度为 0 或者被内容撑开滚动自然失效。正确的写法是三层结构高度一层层落地u-popup :showshow modebottom :round16 :safe-area-inset-bottomfalse closeshow false view classpopup-body view classpopup-header选择城市/view scroll-view classpopup-scroll scroll-y view v-foritem in list :keyitem.id classcity-item{{ item.name }}/view /scroll-view view classpopup-footer u-button typeprimary text确定 clickconfirm/u-button /view /view /u-popup.popup-body { height: 60vh; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: calc(20rpx env(safe-area-inset-bottom)); } .popup-header { flex: 0 0 auto; height: 96rpx; line-height: 96rpx; text-align: center; font-weight: 600; } .popup-scroll { flex: 1 1 auto; min-height: 0; /* 关键flex 子项默认 min-height:auto会撑破容器 */ overflow: hidden; } .popup-footer { flex: 0 0 auto; padding: 20rpx 24rpx 0; }这里有两个细节值得单独拎出来说。第一个是min-height: 0。Flex 布局的子项默认min-height: auto意思是不能比内容矮一旦列表很长这个子项会把整个 flex 容器顶高滚动条就没了。加一行min-height: 0把这个默认值覆盖掉flex: 1才能真正生效。第二个是overflow: hidden加在scroll-view上。虽然scroll-view本身就是可滚动的但在某些小程序基础库版本里父级的圆角裁剪和内部滚动会打架加上这一行能避免内容在圆角处露出一角。3.4 第四步top、center、left 模式的对应改法前面讲的是bottom模式。其他模式改高度的思路一样但落点不同我把常用的几种整理成对照mode容器该设什么注意点bottomheightpadding-bottom安全区内部用 flex 分头/身/尾三块topheightpadding-top状态栏顶部要预留状态栏高度left/rightwidth高度默认铺满改的是宽度不是高度centerwidthmax-height内容居中建议用max-height避免撑破center模式我强烈建议不要写死height。因为居中弹层通常是确认框提示框这类短内容写死高度会导致内容少的时候下面一大片空白视觉上很别扭。用max-height配合overflow-y: auto短内容自然收缩长内容内部滚动是最舒服的形态。top模式容易被忽略的是状态栏。从顶部滑下来的弹层会盖住状态栏区域如果内容直接从最顶上开始排会被刘海或状态栏时间挡住。处理方式是加padding-top: calc(20rpx env(safe-area-inset-top))env(safe-area-inset-top)会返回设备顶部的安全区高度。3.5 一份可以直接抄的完整代码把前面的内容整合起来这就是我项目里现在在用的版本改个类名就能搬到你的项目template u-popup :showshow modebottom :round16 :safe-area-inset-bottomfalse :close-on-click-overlaytrue closehandleClose view classpopup-body view classpopup-header text classtitle{{ title }}/text text classclose taphandleClose关闭/text /view scroll-view classpopup-scroll scroll-y :scroll-topscrollTop slot / /scroll-view view classpopup-footer u-button typeprimary :textconfirmText clickhandleConfirm / /view /view /u-popup /template script export default { name: FixedHeightPopup, props: { show: { type: Boolean, default: false }, title: { type: String, default: 请选择 }, confirmText: { type: String, default: 确定 }, // 高度比例默认 60% heightVh: { type: Number, default: 60 } }, data() { return { scrollTop: 0 } }, methods: { handleClose() { this.$emit(update:show, false) this.$emit(close) }, handleConfirm() { this.$emit(confirm) } } } /script style langscss scoped .popup-body { /* 高度通过内联变量控制方便父组件动态调整 */ height: v-bind(heightVh vh); box-sizing: border-box; display: flex; flex-direction: column; background-color: #ffffff; padding-bottom: calc(20rpx constant(safe-area-inset-bottom)); padding-bottom: calc(20rpx env(safe-area-inset-bottom)); } .popup-header { flex: 0 0 auto; height: 96rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; border-bottom: 1rpx solid #f2f2f2; .title { font-size: 32rpx; font-weight: 600; color: #303133; } .close { font-size: 28rpx; color: #909399; } } .popup-scroll { flex: 1 1 auto; min-height: 0; overflow: hidden; } .popup-footer { flex: 0 0 auto; padding: 20rpx 32rpx 0; } /style注意v-bind(heightVh vh)这一句。这是 Vue 3 的 CSS 变量绑定语法在style里直接把 props 接到样式上。这样父组件传:height-vh80就能动态改高度不用为每种高度写一套 class。如果你用的是 Vue 2 加 uni-app 的组合这个语法不一定支持那就退回到用:class切换预设的几个高度档位或者干脆用内联 style 写在.popup-body上。4. 我踩过的坑和排查思路4.1 高度写了没反应先按这个顺序查三处第一处样式写在了哪个节点上。这是最高频的原因。你如果写在u-popup styleheight: 600rpx上那永远不会有反应因为这层是铺满全屏的定位容器。判断方法很简单打开调试器用元素检查功能H5 端 F12、小程序开发者工具也有 WXML 面板看这个高度到底落在了哪个节点。落点不对改多少遍都是白改。第二处单位的计算是否成立。比如你写了height: 100%但父级是auto那100%算不出结果浏览器会忽略这条规则。这种情况换成vh或者固定的rpx立刻就能看到效果。类似的还有calc()里混用了不同单位导致语法无效——calc(100vh - 120)是错的120没单位整个表达式会被判为无效并丢弃控制台不报错。必须写成calc(100vh - 120rpx)或者calc(100vh - 60px)。第三处是不是被其他样式覆盖了。在style scoped里写样式编译后会带上>onLoad() { uni.onKeyboardHeightChange(res { // 键盘弹起时把弹层高度压缩保证输入框可见 this.keyboardHeight res.height }) }然后把keyboardHeight通过计算属性接到容器高度上height: calc(60vh - ${keyboardHeight}px)这种形式。实测下来这套组合能覆盖大多数机型的输入场景。如果只是纯展示型弹层不做输入那这一步可以直接跳过。4.5 常见问题速查表把上面这些整理成一张表出问题的时候直接对号入座现象最可能原因处理方式写 style 完全没反应样式落在外层定位容器上改写到插槽内第一个子元素上高度生效但有底部白边缺box-sizing: border-box补上该属性scroll-view 不滚动flex 子项min-height: auto加min-height: 0高度在小程序端全失效用了::v-deep穿透换成包裹层或customStylecalc 不生效且无报错表达式里数字缺单位补rpx或px内容被底部 Home 条遮挡安全区未适配加env(safe-area-inset-bottom)圆角处露出内容内部容器未裁剪内部容器加圆角 overflow: hidden弹层打开时高度跳变内容渲染时序提前备好数据或加transition5. 把这套思路再往前推一步5.1 自适应高度内容少的时候撑开内容多的时候滚动固定高度好用但不是所有场景都合适。比如一个选择标签的弹层标签可能只有三个也可能是三十个。写死高度三个标签时下面一大片空白不写高度三十个标签时弹层顶到天花板。我现在的做法是上限 自适应组合.popup-body { max-height: 70vh; height: auto; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; } .popup-scroll { flex: 0 1 auto; max-height: calc(70vh - 96rpx - 100rpx); min-height: 0; }外层给max-height兜底内层滚动区域用flex: 0 1 auto让它按内容收缩同时max-height用calc把头部和底部的高度扣掉。这样内容少的时候弹层矮内容多的时候到 70vh 封顶然后内部滚动两头都照顾到了。这套写法我在三个项目里用过兼容性没问题。这里的关键是flex: 0 1 auto里的那个1。它表示允许收缩。如果写成flex: 0 0 auto滚动区域就不会收缩max-height就形同虚设了。同时calc里的减法要把头部和底部的固定高度都算进去我一般会把这两个高度也抽成 CSS 变量改起来只用动一处。5.2 用 CSS 变量统一管理弹层高度项目里弹层一多高度值散落在各个文件里改一次要翻十个地方。我的做法是在全局样式里定义一组变量/* App.vue 或全局 scss 里 */ page { --popup-h-sm: 40vh; --popup-h-md: 60vh; --popup-h-lg: 80vh; --popup-h-full: 90vh; }然后各处只引用变量.popup-body { height: var(--popup-h-md); }好处很明显产品说所有弹层都矮一点你改一个数字全站生效新页面要加弹层直接从预设里挑一个不用凭感觉拍脑袋。小程序端对 CSS 变量的支持现在很完整这套写法我在微信、支付宝两个端都验证过。需要留意的是CSS 变量定义在page选择器上是有效的但如果你想在u-popup内部使用得确认变量能不能从page继承进去。因为u-popup是自定义组件理论上 CSS 变量会沿 DOM 树继承但小程序端的样式隔离可能影响继承链。稳妥的办法是把变量定义在page上同时在用到的地方也写一份兜底值height: var(--popup-h-md, 60vh)。这样即便变量没继承进来也有个默认值不会塌。5.3 二次封装一个带 height 的 MyPopup如果项目里弹层数量超过五个我建议直接封装一个自己的弹层组件把高度问题在组件内部一次性解决。我在最近一个项目里就是这么做的对外暴露height属性内部处理包裹层、安全区、滚动结构!-- my-popup.vue -- template u-popup :showshow :modemode :roundround :safe-area-inset-bottomfalse closeonClose view classmp-body :stylebodyStyle scroll-view classmp-scroll scroll-y slot / /scroll-view /view /u-popup /template对外只暴露height父组件传60vh、500rpx都行组件内部转成样式字符串挂上去。这样业务页面里就再也见不到u-popup的样式细节了全被收口在一个文件里。日后要换 UI 库改这一个文件就够不用满项目搜u-popup。封装的时候有个决策点scroll-view是必带还是可选。我一开始做成必带后来发现有些弹层内容本来就是固定的比如一个确认框套scroll-view反而多一层节点影响性能。所以现在改成用一个scrollable属性控制默认true需要的时候传false走纯 view 分支。最后分享一个我在实际项目里用得挺顺的小技巧在开发阶段给弹层容器加一条临时边框比如border: 2rpx solid red。这样一眼就能看出容器实际占了多高、内容有没有溢出、安全区的 padding 算得对不对。调好之后把边框删掉就行。这个习惯帮我省了无数次打开调试器一步步量元素的时间尤其是帮别人排查问题时让对方加一条边框截图发过来基本一眼就能定位问题在哪一层。另外如果你在项目里还遇到过uview日历组件直接展示、或者自定义导航栏高度和弹层高度打架的情况思路其实是一样的——先找到真正承载尺寸的那个节点再把高度写到它身上剩下的都是细节适配问题。
uView uni-popup 弹层高度设置：四种方案与小程序滚动避坑
上周改一个 uni-app 项目产品要求在底部弹出一个选择面板固定占屏幕大约六成高度里面塞一长串可滚动的城市列表。我第一反应是翻uni-popup的文档找height属性——uView 的弹出层组件里根本没有这一项。给组件标签直接写styleheight: 600rpx屏幕上纹丝不动写:height600控制台直接飘红。折腾了大半个小时才想明白uview 的 uni-popup 从一开始就没打算让你从外面控制高度它把盒子的尺寸交给了内部内容去撑。这篇就把我这一路试出来的四种改高度办法、每种办法的适用边界以及小程序端那些文档里没写的坑一次性讲清楚。不管你是刚上手 uview 的新手还是写过好几个弹层的老手看完至少能少走两小时的弯路。1. 先搞明白uview 的 uni-popup 为什么设不了高度1.1 从组件结构看高度不归标签管要解决一个组件设不了某属性的问题最省时间的做法不是搜博客而是打开node_modules/uview-ui/components/u-popup/u-popup.vue或者你项目里uni_modules/uview-ui/components/u-popup/u-popup.vue看一眼源码。这个文件不长结构大致是这样的最外层是一个view classu-popup里面套一个遮罩层再里面是view classu-popup__content真正的内容通过默认插槽塞进u-popup__content里。关键就在这一步你在组件标签上写的style或者class最终落点是最外层的.u-popup而.u-popup是一个position: fixed铺满全屏的容器它的职责是定位遮罩和内容本身高度永远是 100%。你把height: 600rpx写到.u-popup上等于给一个铺满屏幕的透明背景层设了个高度视觉上自然没有任何变化。真正决定弹层长多高的是.u-popup__content而这个节点是组件的内部节点从外面直接传 style 到不了它身上。想通这一层后面所有方案就都是一句话想办法把高度写到.u-popup__content上或者写到它内部的第一个子元素上。前者要靠透传能力后者只要有插槽就能做。1.2 五种 mode 下高度的默认表现完全不一样很多人以为uni-popup就是从下面滑上来其实它有五种模式mode取值分别是top、bottom、left、right、center。这五种模式下内容盒子的尺寸策略完全不同直接决定了你改高度的难度bottom和top内容盒子宽度铺满高度由内容撑开同时有一个隐性的最大高度限制通常接近视口高度。这是最常用的两种也是改高度需求最集中的场景。left和right内容盒子高度铺满宽度由内容撑开一般会给一个默认宽度。你要改的是宽度而不是高度。center内容盒子宽高都由内容撑开四周留白居中显示。想固定尺寸比bottom还麻烦一点因为它还有一个negativeTop之类的位移选项在干扰视觉。我遇到过最典型的误判是有人想在center模式下设高度结果把mode换成了bottom才好使——其实不是bottom更好用而是center模式下内容盒子是inline-block类的收缩盒撑开逻辑不同。所以动手之前先确认你的mode再谈高度。1.3 小程序端的样式隔离让 deep 选择器时灵时不灵如果你是从 H5 或者 Vue 项目转过来的第一反应大概率是写深度选择器/* 这种写法在 H5 端常见但小程序端别指望 */ ::v-deep .u-popup__content { height: 60vh; }在 H5 端这段样式确实能生效因为浏览器里所有 DOM 都在同一棵树里编译出来的[data-v-xxxx] .u-popup__content能精准命中。但编译到小程序之后情况变了uView 组件会被编译成一个独立的自定义组件小程序默认开启样式隔离isolated父级页面的样式根本进不去子组件内部。你写的.u-popup__content规则会被当成页面里不存在的类名直接丢弃控制台不会有任何报错你只会看到高度没生效。注意不要因为 H5 上调通了就以为方案成立。多端项目里以小程序端为准做判断否则上线后就是一地鸡毛。这个坑我吃了不止一次。后来我干脆定了个规矩凡是需要穿透到 uView 组件内部节点的样式一律不用 deep 选择器做主方案只当应急手段并且用条件编译明确标出只对 H5 生效。1.4 1.x 和 2.x 的属性差异别照抄老博客网上关于uni-popup的文章有很大一部分是 uView 1.x 时代的属性名和 2.x 对不上照抄必然踩空。最明显的两处差异对比项uView 1.xuView 2.x控制显示:popuptrue:showtrue模式参数modemode圆角border-radius相关写法:round10自定义样式customStyle字符串形式较多customStyle对象形式安全区safeAreaInsetBottomsafeAreaInsetBottom注意popup和show这一组。我见过一个同事照着 2019 年的文章写:popupshow在 2.x 项目里死活弹不出来查了半天以为是 z-index 被别的组件盖住了。所以看老资料的时候先看一眼版本号或者干脆打开自己项目里的u-popup.vue翻到props那一段五分钟能省你两小时。2. 四种改高度的路子我在项目里怎么挑2.1 内容包裹层最稳、跨端一致我的默认选择做法极其朴素在u-popup的插槽里第一个元素不是你的业务内容而是一个自己写的view classpopup-body把高度写在这个 view 上。u-popup :showshow modebottom :round16 closeshow false view classpopup-body !-- 业务内容放这里 -- view v-foritem in list :keyitem.id{{ item.name }}/view /view /u-popup.popup-body { height: 60vh; box-sizing: border-box; overflow: hidden; }为什么我把它当默认方案因为它不依赖任何版本特性不依赖样式穿透H5、微信小程序、各家小程序、App 端编译结果全都一致。高度写在你自己能控制的节点上出问题也容易排查。唯一的代价是多了一层 view需要多写一行样式但这点成本换来的稳定性太值了。这里有个细节box-sizing: border-box一定要加。因为后面你要给这个容器加内边距做安全区适配如果不加padding-bottom会叠加在60vh之上实际高度变成60vh padding底部就会多出一截白边或者被顶出屏幕。2.2 customStyle 透传够用但别把它当唯一手段uView 2.x 的u-popup提供了一个customStyle属性注释是用户自定义样式对象形式。它的原理是把这个对象通过:style绑定到组件内部的容器节点上。理论上你可以这样写u-popup :showshow modebottom :custom-style{ height: 60vh, overflow: hidden } view内容/view /u-popup这条路子看起来最正统不用包一层 view也不用穿透。但我把它排第二位原因是不同小版本上customStyle挂载的节点不一样。有的版本挂在内层u-popup__content上高度能生效有的版本挂在更外层的定位容器上写了也是白写。我就遇到过一次升级 uView 之后原本正常的弹层高度突然失效的情况最后定位到是新版本改了样式挂载节点。所以我的建议是用之前先在真机上跑一下确认当前版本能生效并且在代码里写一句注释标明依赖的 uView 版本号。这样半年后别人接手或者你自己升级依赖时能第一时间想到问题出在哪。2.3 深度选择器H5 的应急手段别当主方案前面说过小程序端有样式隔离。但如果是纯 H5 项目深度选择器是可行的而且不用改模板结构/* 只在 H5 生效用条件编译圈起来 */ /* #ifdef H5 */ ::v-deep .u-popup__content { height: 60vh; overflow: hidden; } /* #endif */用#ifdef H5包起来的好处是编译到其他端时这段样式会被整个剔除不会留下无效代码也避免未来有人误以为它在小程序上生效。我在维护一个老项目时就是这么干的因为那个项目的模板层动不了涉及一堆历史包袱只能从样式上想办法。注意任何穿透到组件内部的选择器都属于和第三方组件的内部实现耦合。一旦 uView 在某个版本改了类名.u-popup__content改成别的这段样式会静默失效不会报错。所以一定要在注释里写清楚它依赖的类名方便后续排查。2.4 maxHeight 思路不设死高度只给个上限还有一种需求其实不是我要它固定多高而是内容多的时候别超过屏幕。这种场景不该去写死height而应该给容器一个max-height.popup-body { max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }内容少的时候容器自然收缩看起来干净内容多的时候到 80vh 封顶内部滚动。实测这个方案在内容长度不确定的场景比如接口返回的列表条数不固定里体验最好比写死一个60vh、结果只返回两条数据时底下留一大片空白要自然得多。四种方案的横向对比我整理成了一张表选型的时候直接看这张方案跨端可靠性实现成本适用场景主要风险内容包裹层高全端一致低多一层 view绝大多数场景无customStyle中看版本低不想改模板结构版本升级后失效深度选择器低仅 H5低H5 老项目应急类名变更后静默失效maxHeight高全端一致低内容长度不确定需配合滚动处理3. 动手改把底部弹出层做成固定高度加内部滚动3.1 第一步确定高度值用 vh 而不是 rpx先说单位选择。很多人条件反射用rpx因为小程序里rpx好用。但对弹层高度来说rpx有个致命问题rpx是按屏幕宽度等比换算的屏幕越宽600rpx的绝对高度越大。在 iPad 或者横屏手机上一个60vh看起来合理的弹层用1200rpx写死之后可能只占屏幕的三分之一。所以高度我坚持用vh。vh是视口高度百分比在任何设备上都占同样比例。如果必须换算成rpx比如设计稿给的就是rpx可以用这个公式目标高度(rpx) 设计稿高度比例 × 750 × (屏幕高度 / 屏幕宽度)但这个公式里屏幕高度/屏幕宽度是变的所以换来换去最后还是回到vh最省心。我的做法是容器高度用vh内部间距、圆角、字号用rpx各取所长。还有一个容易忽略的点小程序里的vh对应的是 webview 的可视区域高度。如果你的页面用了自定义导航栏那这段高度是包含导航栏所占空间的弹层从底部升起时视觉比例会和你预期有偏差。稳妥的做法是扣掉这一部分.popup-body { height: calc(100vh - var(--nav-bar-height, 88rpx) - 40vh); }把导航高度抽成 CSS 变量在App.vue或者全局样式里根据uni.getSystemInfoSync()的结果动态赋值页面里各处复用。这样一来微信小程序顶部导航栏高度的变化、不同机型状态栏高度的差异都收敛到一个变量里管。3.2 第二步安全区适配要算进去别让内容被 Home 条盖住iPhone 底部有一条 Home Indicator安卓阵营也有类似的虚拟导航条。如果弹层贴着屏幕底边内容最后一行就会被盖住。uView 的u-popup有一个safeAreaInsetBottom属性默认开启它的作用是在内容底部补一段安全区间距。但这里有个陷阱当你自己给容器设了固定高度安全区的 padding 会被算进这个高度里挤压真实内容的可用空间。我的处理方式是关掉组件自带的安全区自己在包裹层上算.popup-body { height: 60vh; box-sizing: border-box; padding-bottom: calc(20rpx constant(safe-area-inset-bottom)); padding-bottom: calc(20rpx env(safe-area-inset-bottom)); }两行padding-bottom不是重复是兼容写法constant()给老版本 iOS 用env()给新版本用浏览器会按支持情况取最后一条生效的。20rpx是自己留的呼吸间距env(safe-area-inset-bottom)是设备真实的安全区高度。注意如果你同时开着组件的safeAreaInsetBottom又自己写了一遍 padding底部会变成双倍间距看起来非常怪。二选一别两头都做。3.3 第三步scroll-view 的高度必须给确定值这是整个流程里最容易翻车的一步。很多人把列表换成scroll-view scroll-y之后就发现滚不动然后开始怀疑是不是scroll-y没加、是不是需要enhanced属性——其实 90% 的情况是父级没有确定高度。scroll-view的高度计算逻辑是需要一个明确的、可计算的容器高度作为参照。如果父级是height: auto那scroll-view的height: 100%就等于100% 的 undefined最终高度为 0 或者被内容撑开滚动自然失效。正确的写法是三层结构高度一层层落地u-popup :showshow modebottom :round16 :safe-area-inset-bottomfalse closeshow false view classpopup-body view classpopup-header选择城市/view scroll-view classpopup-scroll scroll-y view v-foritem in list :keyitem.id classcity-item{{ item.name }}/view /scroll-view view classpopup-footer u-button typeprimary text确定 clickconfirm/u-button /view /view /u-popup.popup-body { height: 60vh; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: calc(20rpx env(safe-area-inset-bottom)); } .popup-header { flex: 0 0 auto; height: 96rpx; line-height: 96rpx; text-align: center; font-weight: 600; } .popup-scroll { flex: 1 1 auto; min-height: 0; /* 关键flex 子项默认 min-height:auto会撑破容器 */ overflow: hidden; } .popup-footer { flex: 0 0 auto; padding: 20rpx 24rpx 0; }这里有两个细节值得单独拎出来说。第一个是min-height: 0。Flex 布局的子项默认min-height: auto意思是不能比内容矮一旦列表很长这个子项会把整个 flex 容器顶高滚动条就没了。加一行min-height: 0把这个默认值覆盖掉flex: 1才能真正生效。第二个是overflow: hidden加在scroll-view上。虽然scroll-view本身就是可滚动的但在某些小程序基础库版本里父级的圆角裁剪和内部滚动会打架加上这一行能避免内容在圆角处露出一角。3.4 第四步top、center、left 模式的对应改法前面讲的是bottom模式。其他模式改高度的思路一样但落点不同我把常用的几种整理成对照mode容器该设什么注意点bottomheightpadding-bottom安全区内部用 flex 分头/身/尾三块topheightpadding-top状态栏顶部要预留状态栏高度left/rightwidth高度默认铺满改的是宽度不是高度centerwidthmax-height内容居中建议用max-height避免撑破center模式我强烈建议不要写死height。因为居中弹层通常是确认框提示框这类短内容写死高度会导致内容少的时候下面一大片空白视觉上很别扭。用max-height配合overflow-y: auto短内容自然收缩长内容内部滚动是最舒服的形态。top模式容易被忽略的是状态栏。从顶部滑下来的弹层会盖住状态栏区域如果内容直接从最顶上开始排会被刘海或状态栏时间挡住。处理方式是加padding-top: calc(20rpx env(safe-area-inset-top))env(safe-area-inset-top)会返回设备顶部的安全区高度。3.5 一份可以直接抄的完整代码把前面的内容整合起来这就是我项目里现在在用的版本改个类名就能搬到你的项目template u-popup :showshow modebottom :round16 :safe-area-inset-bottomfalse :close-on-click-overlaytrue closehandleClose view classpopup-body view classpopup-header text classtitle{{ title }}/text text classclose taphandleClose关闭/text /view scroll-view classpopup-scroll scroll-y :scroll-topscrollTop slot / /scroll-view view classpopup-footer u-button typeprimary :textconfirmText clickhandleConfirm / /view /view /u-popup /template script export default { name: FixedHeightPopup, props: { show: { type: Boolean, default: false }, title: { type: String, default: 请选择 }, confirmText: { type: String, default: 确定 }, // 高度比例默认 60% heightVh: { type: Number, default: 60 } }, data() { return { scrollTop: 0 } }, methods: { handleClose() { this.$emit(update:show, false) this.$emit(close) }, handleConfirm() { this.$emit(confirm) } } } /script style langscss scoped .popup-body { /* 高度通过内联变量控制方便父组件动态调整 */ height: v-bind(heightVh vh); box-sizing: border-box; display: flex; flex-direction: column; background-color: #ffffff; padding-bottom: calc(20rpx constant(safe-area-inset-bottom)); padding-bottom: calc(20rpx env(safe-area-inset-bottom)); } .popup-header { flex: 0 0 auto; height: 96rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; border-bottom: 1rpx solid #f2f2f2; .title { font-size: 32rpx; font-weight: 600; color: #303133; } .close { font-size: 28rpx; color: #909399; } } .popup-scroll { flex: 1 1 auto; min-height: 0; overflow: hidden; } .popup-footer { flex: 0 0 auto; padding: 20rpx 32rpx 0; } /style注意v-bind(heightVh vh)这一句。这是 Vue 3 的 CSS 变量绑定语法在style里直接把 props 接到样式上。这样父组件传:height-vh80就能动态改高度不用为每种高度写一套 class。如果你用的是 Vue 2 加 uni-app 的组合这个语法不一定支持那就退回到用:class切换预设的几个高度档位或者干脆用内联 style 写在.popup-body上。4. 我踩过的坑和排查思路4.1 高度写了没反应先按这个顺序查三处第一处样式写在了哪个节点上。这是最高频的原因。你如果写在u-popup styleheight: 600rpx上那永远不会有反应因为这层是铺满全屏的定位容器。判断方法很简单打开调试器用元素检查功能H5 端 F12、小程序开发者工具也有 WXML 面板看这个高度到底落在了哪个节点。落点不对改多少遍都是白改。第二处单位的计算是否成立。比如你写了height: 100%但父级是auto那100%算不出结果浏览器会忽略这条规则。这种情况换成vh或者固定的rpx立刻就能看到效果。类似的还有calc()里混用了不同单位导致语法无效——calc(100vh - 120)是错的120没单位整个表达式会被判为无效并丢弃控制台不报错。必须写成calc(100vh - 120rpx)或者calc(100vh - 60px)。第三处是不是被其他样式覆盖了。在style scoped里写样式编译后会带上>onLoad() { uni.onKeyboardHeightChange(res { // 键盘弹起时把弹层高度压缩保证输入框可见 this.keyboardHeight res.height }) }然后把keyboardHeight通过计算属性接到容器高度上height: calc(60vh - ${keyboardHeight}px)这种形式。实测下来这套组合能覆盖大多数机型的输入场景。如果只是纯展示型弹层不做输入那这一步可以直接跳过。4.5 常见问题速查表把上面这些整理成一张表出问题的时候直接对号入座现象最可能原因处理方式写 style 完全没反应样式落在外层定位容器上改写到插槽内第一个子元素上高度生效但有底部白边缺box-sizing: border-box补上该属性scroll-view 不滚动flex 子项min-height: auto加min-height: 0高度在小程序端全失效用了::v-deep穿透换成包裹层或customStylecalc 不生效且无报错表达式里数字缺单位补rpx或px内容被底部 Home 条遮挡安全区未适配加env(safe-area-inset-bottom)圆角处露出内容内部容器未裁剪内部容器加圆角 overflow: hidden弹层打开时高度跳变内容渲染时序提前备好数据或加transition5. 把这套思路再往前推一步5.1 自适应高度内容少的时候撑开内容多的时候滚动固定高度好用但不是所有场景都合适。比如一个选择标签的弹层标签可能只有三个也可能是三十个。写死高度三个标签时下面一大片空白不写高度三十个标签时弹层顶到天花板。我现在的做法是上限 自适应组合.popup-body { max-height: 70vh; height: auto; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; } .popup-scroll { flex: 0 1 auto; max-height: calc(70vh - 96rpx - 100rpx); min-height: 0; }外层给max-height兜底内层滚动区域用flex: 0 1 auto让它按内容收缩同时max-height用calc把头部和底部的高度扣掉。这样内容少的时候弹层矮内容多的时候到 70vh 封顶然后内部滚动两头都照顾到了。这套写法我在三个项目里用过兼容性没问题。这里的关键是flex: 0 1 auto里的那个1。它表示允许收缩。如果写成flex: 0 0 auto滚动区域就不会收缩max-height就形同虚设了。同时calc里的减法要把头部和底部的固定高度都算进去我一般会把这两个高度也抽成 CSS 变量改起来只用动一处。5.2 用 CSS 变量统一管理弹层高度项目里弹层一多高度值散落在各个文件里改一次要翻十个地方。我的做法是在全局样式里定义一组变量/* App.vue 或全局 scss 里 */ page { --popup-h-sm: 40vh; --popup-h-md: 60vh; --popup-h-lg: 80vh; --popup-h-full: 90vh; }然后各处只引用变量.popup-body { height: var(--popup-h-md); }好处很明显产品说所有弹层都矮一点你改一个数字全站生效新页面要加弹层直接从预设里挑一个不用凭感觉拍脑袋。小程序端对 CSS 变量的支持现在很完整这套写法我在微信、支付宝两个端都验证过。需要留意的是CSS 变量定义在page选择器上是有效的但如果你想在u-popup内部使用得确认变量能不能从page继承进去。因为u-popup是自定义组件理论上 CSS 变量会沿 DOM 树继承但小程序端的样式隔离可能影响继承链。稳妥的办法是把变量定义在page上同时在用到的地方也写一份兜底值height: var(--popup-h-md, 60vh)。这样即便变量没继承进来也有个默认值不会塌。5.3 二次封装一个带 height 的 MyPopup如果项目里弹层数量超过五个我建议直接封装一个自己的弹层组件把高度问题在组件内部一次性解决。我在最近一个项目里就是这么做的对外暴露height属性内部处理包裹层、安全区、滚动结构!-- my-popup.vue -- template u-popup :showshow :modemode :roundround :safe-area-inset-bottomfalse closeonClose view classmp-body :stylebodyStyle scroll-view classmp-scroll scroll-y slot / /scroll-view /view /u-popup /template对外只暴露height父组件传60vh、500rpx都行组件内部转成样式字符串挂上去。这样业务页面里就再也见不到u-popup的样式细节了全被收口在一个文件里。日后要换 UI 库改这一个文件就够不用满项目搜u-popup。封装的时候有个决策点scroll-view是必带还是可选。我一开始做成必带后来发现有些弹层内容本来就是固定的比如一个确认框套scroll-view反而多一层节点影响性能。所以现在改成用一个scrollable属性控制默认true需要的时候传false走纯 view 分支。最后分享一个我在实际项目里用得挺顺的小技巧在开发阶段给弹层容器加一条临时边框比如border: 2rpx solid red。这样一眼就能看出容器实际占了多高、内容有没有溢出、安全区的 padding 算得对不对。调好之后把边框删掉就行。这个习惯帮我省了无数次打开调试器一步步量元素的时间尤其是帮别人排查问题时让对方加一条边框截图发过来基本一眼就能定位问题在哪一层。另外如果你在项目里还遇到过uview日历组件直接展示、或者自定义导航栏高度和弹层高度打架的情况思路其实是一样的——先找到真正承载尺寸的那个节点再把高度写到它身上剩下的都是细节适配问题。
