企业官网建设流程全解析

上周改一个 uni-app 项目，产品要求在底部弹出一个选择面板，固定占屏幕大约六成高度，里面塞一长串可滚动的城市列表。我第一反应是翻uni-popup的文档找height属性——uView 的弹出层组件里根本没有这一项。给组件标签直接写style="height: 600rpx"，屏幕上纹丝不动；写:height="600"，控制台直接飘红。折腾了大半个小时才想明白，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 class="u-popup">，里面套一个遮罩层，再里面是<view class="u-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 对不上，照抄必然踩空。最明显的两处差异：

注意popup和show这一组。我见过一个同事照着 2019 年的文章写:popup="show"，在 2.x 项目里死活弹不出来，查了半天以为是 z-index 被别的组件盖住了。所以看老资料的时候，先看一眼版本号，或者干脆打开自己项目里的u-popup.vue，翻到props那一段，五分钟能省你两小时。

2. 四种改高度的路子，我在项目里怎么挑

2.1 内容包裹层：最稳、跨端一致，我的默认选择

做法极其朴素：在<u-popup>的插槽里，第一个元素不是你的业务内容，而是一个自己写的<view class="popup-body">，把高度写在这个 view 上。

<u-popup :show="show" mode="bottom" :round="16" @close="show = false"> <view class="popup-body"> <!-- 业务内容放这里 --> <view v-for="item in list" :key="item.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 :show="show" mode="bottom" :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、结果只返回两条数据时底下留一大片空白要自然得多。

四种方案的横向对比，我整理成了一张表，选型的时候直接看这张：

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 :show="show" mode="bottom" :round="16" :safe-area-inset-bottom="false" @close="show = false"> <view class="popup-body"> <view class="popup-header">选择城市</view> <scroll-view class="popup-scroll" scroll-y> <view v-for="item in list" :key="item.id" class="city-item">{{ item.name }}</view> </scroll-view> <view class="popup-footer"> <u-button type="primary" text="确定" @click="confirm"></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模式。其他模式改高度的思路一样，但落点不同，我把常用的几种整理成对照：

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 :show="show" mode="bottom" :round="16" :safe-area-inset-bottom="false" :close-on-click-overlay="true" @close="handleClose" > <view class="popup-body"> <view class="popup-header"> <text class="title">{{ title }}</text> <text class="close" @tap="handleClose">关闭</text> </view> <scroll-view class="popup-scroll" scroll-y :scroll-top="scrollTop"> <slot /> </scroll-view> <view class="popup-footer"> <u-button type="primary" :text="confirmText" @click="handleConfirm" /> </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 lang="scss" 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-vh="80"就能动态改高度，不用为每种高度写一套 class。如果你用的是 Vue 2 加 uni-app 的组合，这个语法不一定支持，那就退回到用:class切换预设的几个高度档位，或者干脆用内联 style 写在.popup-body上。

4. 我踩过的坑和排查思路

4.1 高度写了没反应，先按这个顺序查三处

第一处，样式写在了哪个节点上。这是最高频的原因。你如果写在<u-popup style="height: 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 常见问题速查表

把上面这些整理成一张表，出问题的时候直接对号入座：

5. 把这套思路再往前推一步

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 :show="show" :mode="mode" :round="round" :safe-area-inset-bottom="false" @close="onClose"> <view class="mp-body" :style="bodyStyle"> <scroll-view class="mp-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日历组件直接展示、或者自定义导航栏高度和弹层高度打架的情况，思路其实是一样的——先找到真正承载尺寸的那个节点，再把高度写到它身上，剩下的都是细节适配问题。