主题
组件通信与表单组件（一）
本页对应 组件通信与表单组件，共 7 段视频，约 56 分钟。
学习目标
- 能说明粘性定位（
position: sticky）必须配合top/left等偏移值才会生效，并能通过图示与计算过程解释 Tab 下划线居中定位时为何要在“父级距离相减后除以 2”的基础上再减去父容器的偏移量，从而保证组件在页面任意位置使用时下划线定位准确。 - 能复现并修复“粘性盒子与父盒子等高导致 sticky 失效”的问题：说出“父容器高度必须大于粘性盒子”的结论，给出至少两种可行改法（给父容器设更大高度、把其他内容放入父容器成为兄弟节点），并能解释父容器滚出视口后粘性效果随之消失的现象。
- 能使用 HBuilderX 从零创建 uni-app（Vue3）项目，按要求命名项目与选择保存路径，在根目录创建
.prettierrc配置文件统一代码风格，并完成 tabBar 配置（4 个页面、图标、导航标题）且运行后点击切换正常。 - 能指出项目中全局样式应写在
App.vue、SCSS 变量与混合应写在uni.scss，并在页面中正确使用所定义的变量与文字多行省略混合（传入行数参数生效）。 - 能独立完成字体图标的制作与导入：下载基于类名的图标、解压后放入
static目录、在App.vue中用@import引入样式文件，并在页面中通过公共类名 + 图标类名显示出图标；同时能用uni-icons的custom-prefix方式使用自定义图标，并通过color、size属性调整颜色与字号。 - 能说明多色图标的概念及其
symbol/SVG用法（引入 JS、使用svg+use标签），并明确指出小程序不支持svg标签、多色图标在原生小程序中无法直接使用的结论。
知识点
学习反馈：tab 指示线为什么要减父容器距离
为什么需要：封装 tab 组件时，现成组件库没有可直接使用的组件，只能自己封装；封装中涉及位置计算，缺少训练时容易觉得“这一步多余”。
怎么想：需求是点击谁，谁高亮，并让下划线出现在该项居中位置。下划线要相对 tab 父容器定位，而不是相对页面定位。
怎么做：先获取点击项到页面的距离，再减去 tab 父容器到页面的距离，得到该项在父容器内的相对位置；居中则用高度差除以 2 的思路处理。转写稿中反复强调“减去爸爸的距离”，目的是让 tab 栏无论放在页面哪个位置，下划线都始终以父容器为参考，不跑偏。
易错点：不要直接用页面距离算下划线；父容器移动后线会错位。画图时尽量画大一点，把“页面距离、父容器距离、相对距离”标清楚。
粘性定位补充：先补定位值，再处理父盒子
为什么需要：实际中粘性定位出现小 bug，需要作为补充知识点讲清。
怎么想：先验证最基本条件：粘性定位必须写 top、left 等定位值；不写就不会吸顶。
怎么做：
css
.sticky {
position: sticky;
top: 0;
}转写稿调试过程是：只加 position: sticky 时滚动不吸顶；补 top: 0 后吸顶；写 top: 10px 则距顶部 10px 吸住。
易错点：只写 position: sticky 不写定位值，是最常见的失效原因。
粘性定位 bug：父盒子与粘性盒子一样高会失效
为什么需要：给粘性盒子外包一层父盒子后，吸顶突然消失，这是实际踩到的坑。
怎么想：先记结论：粘性盒子与父盒子一样高时，粘性定位失效；父盒子比粘性盒子高时恢复。
怎么做：给父盒子设置高度，例如：
css
.wrapper {
height: 100px;
}转写稿中粘性盒子高度约 60px，父盒子设为 100px 后恢复吸顶；也可以在原父盒子里再放一个空白盒子，让父盒子被撑高。
易错点：父盒子只有一个子元素时，高度常被这个子元素撑开，二者一样高，粘性就挂掉。另一个细节是：父盒子滚出视口后，粘性也会跟着失效；开发中若想长期不失效，父盒子需要足够高。
项目创建与 tabBar 配置
为什么需要：从本节开始进入项目阶段，先搭目录和基础配置。
怎么想：项目名、页面名尽量与讲义一致，避免后续跳转路径对不上；先建页面，再配 tabBar，避免报错。
怎么做：HBuilderX 新建项目，选择默认模板和 Vue3，项目名用“优医咨询”，保存位置固定；不要勾选语音开发等暂时不用的能力。配置 tabBar 时先把页面建好，再把 tab 图标复制到 static 下。
易错点：项目名和页面名不要随意改；配置文件后缀名不要写错，转写稿特别提醒 prettier 相关文件名注意两个 t。
全局样式与 uni.scss
为什么需要：项目会有公共样式、变量和混合，需要固定放置位置。
怎么想：全局普通样式放 APP.vue；Sass 变量和混合放 uni.scss，供全局使用。
怎么做：把项目公共样式粘到 APP.vue；在 uni.scss 中定义变量和混合，例如控制文字多行省略的 line 变量与混合，传入 1 就一行、传入 2 就两行，默认值为 2。
易错点：不要把这些公共内容散落到各页面；uni.scss 是固定文件，变量和混合写这里才能全局使用。
字体图标：制作、引入与使用
为什么需要：项目需要自定义图标，而字体图标属于样式资源。
怎么想：在 uni-app 中使用字体图标与网页基本一致：制作图标、下载并放入项目、引入样式、页面使用类名。
怎么做：在图标平台选择“基于类名”下载，解压后把字体文件和样式文件放到 static/font，将 CSS 改为 SCSS，在 APP.vue 中引入：
scss
@import "@/static/font/iconfont.scss";页面使用：
html
<text class="iconfont icon-location"></text>转写稿调试时引入后报错，原因是少写分号；补上分号后图标出现。
易错点：引入语句别漏分号；类名要用公共类名加具体图标名；小程序原生不支持本地字体路径，但 uni-app 打包时会处理，这是差异点。
uni-icons 整合自定义图标
为什么需要：常规字体图标改颜色、字号要写 CSS；用 uni-icons 组件可直接设置属性。
怎么想：先安装扩展组件，再使用 type、custom-prefix、color、size。
怎么做：
html
<uni-icons
type="location"
custom-prefix="iconfont"
color="red"
size="40"
></uni-icons>转写稿中一开始图标不显示，排查后发现 uni-icons 组件没有安装；安装后重新编译正常。
易错点：使用扩展组件前必须先安装；自定义图标要写 custom-prefix，不要只写 type。
多色图标：概念与限制
为什么需要：有些图标不止一个颜色，叫多色图标。
怎么想：多色图标制作步骤与单色类似，但使用方式不同：要引入 JS，使用 svg 标签和 use，通过名称切换图标。
怎么做：示意结构如下：
html
<svg><use xlink:href="#icon-xxx"></use></svg>易错点：小程序暂不支持 svg 标签，所以这种多色图标在小程序端会失效；后续需要专门方案处理。
粘性定位补充：父级距离与失效条件
为什么需要：tabBar 指示线要跟着点击项居中，不能只按页面边界算，否则父容器一移动，线就偏。
怎么想：先取元素到页面的距离，再减去父容器到页面的距离，得到元素相对父容器的位置；父容器整体移动时，这个相对距离不变，指示线才有稳定参照。
怎么做：转写稿中的推导是“大距离减小距离再除以2”求居中，同时要减父级距离，把计算基准固定在父容器上。粘性盒子必须写定位值，例如：
css
.sticky {
position: sticky;
top: 0;
}调试时发现：给 sticky 外套一个 wrapper 后定位消失；结论是“粘性盒子与父盒子一样高则失效”。给 wrapper 设置比 sticky 更高的高度，或放入另一个兄弟盒子把父级撑高，定位恢复：
html
<div class="wrapper">
<div class="sticky">...</div>
</div>css
.wrapper { height: 100px; } /* 要大于 sticky 的高度 */易错点：只写 position: sticky 不写 top；父盒子与粘性盒子同高；父盒子滚出视口后粘性效果也会结束，所以父级要足够高。
创建优医咨询项目
为什么需要：项目阶段要统一目录、命名和运行环境，否则后面讲义代码里的跳转路径会对不上。
怎么想：先按企业项目习惯确定项目名和保存位置，再选模板与 Vue 版本。
怎么做：打开 HBuilderX，新建项目，选择 uni-app 默认模板，项目名用“优医咨询”，保存到与后续讲义平行的目录；Vue 版本选 Vue3，语音开发等暂不勾选。
易错点：项目名随意改导致路径不一致；误选 Vue2；项目文件夹乱放，后面不好找。
配置 tabBar 与格式化
为什么需要：tabBar 要对应真实页面和图标，格式化配置保证团队代码风格一致。
怎么想：先建页面，再配 tabBar；先准备 static 下的图标，再写配置。
怎么做：按讲义创建四个页面，把图标拷到 static，在根目录创建格式化配置文件（转写稿提醒文件名以点开头、注意两个 r，按讲义为准），再配置 tabBar。
易错点：页面没建就先配 tabBar 会报错；static 里多套一层文件夹；配置文件名写错。
全局样式与 uni.scss
为什么需要：项目里会有公共样式、变量和文字溢出处理，不能每个页面重复写。
怎么想：全局样式放 App.vue；变量和混合放 uni.scss。
怎么做：把讲义中的公共样式粘到 App.vue；在 uni.scss 中定义变量和混合，转写稿中用变量控制文字显示行数，文字过多时用点点点省略。
易错点：把全局样式写到单个页面；变量或混合写错文件；粘贴后漏分号。
字体图标的制作与引入
为什么需要：公司 logo、业务图标往往不在内置图标库里，需要自定义字体图标。
怎么想：制作、下载、放入项目、全局引入、页面使用，步骤和网页一致。
怎么做：在图标平台选“基于类名”下载，解压后把字体文件和样式文件放到 static/font，把 iconfont.css 改为 scss，在 App.vue 中引入：
scss
@import '@/static/font/iconfont.scss';页面使用：
html
<text class="iconfont icon-location"></text>易错点：引入语句漏分号；路径写错；小程序样式不支持本地资源，但 uni-app 打包时会处理成 base64，这一点要注意区分。
与 uni-icons 整合
为什么需要：直接用 class 改颜色、字号不方便，整合 uni-icons 后可以直接传属性。
怎么想：先安装 uni-ui 扩展组件，再用 type 指定图标名，用 custom-prefix 指定自定义前缀。
怎么做：
html
<uni-icons
type="icon-location"
custom-prefix="iconfont"
color="red"
size="40"
></uni-icons>易错点：没安装 uni-ui 就使用组件；自定义图标忘了写 custom-prefix="iconfont"；把内置图标名和自定义类名混用。
多色图标与限制
为什么需要：有些图标不止一个颜色，单色字体图标无法满足。
怎么想：多色图标通常配合 symbol 方式，引入 JS 后用 svg 标签和 use 引用图标名。
怎么做：按平台步骤下载 symbol 资源，页面中用 svg 的 use 指向对应图标名。
易错点：多色图标不能按普通类名方式理解；小程序暂不支持 svg 标签，多色图标在小程序端会失效，后续需要专门方案解决。
先建页面再配 tabBar
为什么需要：tabBar 里的 pagePath 必须对应真实页面，否则配置一保存就会报错。转写稿里反复强调“先把页面建好再去配”，就是为了避免这种无效配置。
怎么想：配置 tabBar 不是先写配置再补页面，而是先把四个入口页面创建好，并且页面名、路径严格和后续代码一致。
怎么做：在项目里先建好 tabBar 要用的页面；名字尽量按讲义来，不要自己改成 abc、notify 这类不一致的名字。
易错点：页面名不一致，后面跳转路径对不上；先配 tabBar 后建页面，编辑器直接报路径错误；大小写、目录层级写错。
准备 tabBar 图标资源
为什么需要：tabBar 需要普通图标和选中图标，图标文件必须放进项目静态资源目录。
怎么想：图标属于静态资源，统一放 static 下；不要从桌面或资料目录直接引用本地绝对路径。
怎么做：从第三天课程资料里找到 tab 图标，复制到项目的 static 目录；可以在 HBuilderX 里右键“在外部资源管理器打开”，把资料里的三个图标文件夹整理进 static，不要出现两个重复的 static。
易错点：把整个外层文件夹粘进去导致路径多一层；图标路径写错；忘记准备选中态图标。
配置 tabBar 与导航标题
为什么需要：项目底部要有四个入口，并且点击时能切换页面、显示对应标题。
怎么想：这一部分和前面练习过的 tabBar 配置思路一致，关键是 pagePath 与页面一致、图标路径与 static 下资源一致。
怎么做：按前面练习的结构配置四个 list 项，补上文字和图标；配置后逐个点击检查页面切换和标题显示。
易错点：文字写错；页面路径与真实文件不一致；图标路径没指向 static；只配了未选中图标，忘记选中图标。
统一代码风格：.prettierrc
为什么需要：团队开发时一个项目一种风格，靠项目根目录的配置文件统一缩进、引号等格式。
怎么想：配置文件放在项目根目录，只影响当前项目，比全局配置更灵活。
怎么做：新建自定义文件，文件名是 .prettierrc，注意前面有点、后面是后缀；把讲义配置粘进去。
易错点：文件名拼错；文件没放根目录；把 .prettierrc 当成有主文件名的文件。
全局样式放 App.vue
为什么需要：项目里会有公共样式，不能每个页面重复写。
怎么想：当前项目用到的公共样式统一放 App.vue，不同项目公共样式可以不同。
怎么做：把讲义里的公共样式粘到 App.vue 的样式区域，按项目需要保留或补充。
易错点：把公共样式写到某个页面里；粘贴后缺少必要声明或分号导致样式异常。
uni.scss 中的变量与混入
为什么需要：Sass 变量和混入可以在全局复用，比如控制文字省略显示几行。
怎么想：uni.scss 是固定文件，默认内容不一定都用得上，但可以追加自定义变量和混入。
怎么做：在 uni.scss 里定义行数变量和文字省略混入，页面中直接使用。
易错点：以为默认内容都必须用；把变量写到普通页面样式里，导致其他页面不能全局使用。
字体图标：引入与使用
为什么需要：tabBar 和页面里会有自定义图标，现成组件库不一定覆盖公司 logo 等图标。
怎么想：uni-app 中使用字体图标和网页基本一样：制作、下载、放入项目、引入样式、页面使用。
怎么做：在图标平台选“基于类名”下载，解压后把字体文件和 iconfont.css 放到 static/font，将 css 改为 scss；在 App.vue 中引入：
scss
@import '@/static/font/iconfont.scss';页面中使用：
html
<text class="iconfont icon-location"></text>易错点：转写稿里就踩过 @import 少分号导致样式报错；路径写错；忘记公共类名 iconfont。另外，原生小程序对本地字体有限制，但 uni-app 打包时会处理，这点要注意区分。
与 uni-icons 整合
为什么需要：直接用 class 改颜色、字号不方便，uni-icons 组件可以通过属性控制。
怎么想：uni-icons 支持自定义图标，需要先安装扩展组件，再通过 custom-prefix 指定自定义图标前缀。
怎么做：先安装 uni-icons，再写：
html
<uni-icons type="icon-location" custom-prefix="iconfont" color="red" size="40"></uni-icons>易错点：转写稿中一开始图标不显示，就是因为没有先安装组件；type 要写图标类名；custom-prefix 要写公共前缀 iconfont。
多色图标的限制
为什么需要：有些图标不止一个颜色，普通单色字体图标无法满足。
怎么想：多色图标通常要引入 JS，并使用 svg、use 的 symbol 方式。
怎么做：按平台说明引入 JS，在页面用 svg 标签和 use 引用图标名。
易错点：小程序暂时不支持 svg 标签，多色图标在小程序端会失效；做多端项目时要提前考虑替代方案。
代码示例
代码一：粘性定位必须写定位值（top）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>粘性定位 - 必须写 top</title>
<style>
* { margin: 0; padding: 0; }
/* 用一堆空盒子把页面撑高，产生滚动条 */
.line {
height: 120px;
background: #cccccc;
margin-bottom: 10px;
}
/* 吸顶盒子 */
.sticky {
height: 60px;
background: pink;
position: sticky;
/* 关键：必须写定位值，不写 top 粘性定位不生效 */
top: 0; /* 距顶部 0 粘住 */
/* top: 10px; */ /* 距顶部 10px 粘住，中间会留一条空白 */
}
</style>
</head>
<body>
<div class="line"></div>
<div class="line"></div>
<div class="sticky">吸顶盒子</div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</body>
</html>要点
position: sticky单独写是无效的，必须配合top（或left等）定位值，这是转写稿里强调的“第一个点”。top不一定是 0，写top: 10px就表示“滚到距顶部 10px 时粘住”，此时粘住的位置和顶部之间会留出空白距离。- 易错点：把
top写在position之前、或忘了写，页面滚动时盒子完全不动，看起来像“没生效”。
代码二：父盒子高度导致的粘性定位失效（本节 bug 点）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>粘性定位 - 父盒子必须比子盒子高</title>
<style>
* { margin: 0; padding: 0; }
.line {
height: 120px;
background: #cccccc;
margin-bottom: 10px;
}
/* 父盒子（粘性盒子的爸爸） */
.wrapper {
background: blue;
/* 情况一：不写高度，父盒子被唯一的子盒子撑开 => 父子一样高 => 粘性失效 */
/* 情况二：height: 60px，和子盒子一样高 => 粘性失效 */
/* 情况三：比子盒子高 => 粘性恢复 */
height: 100px;
}
/* 粘性盒子 */
.sticky {
height: 60px;
background: pink;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="line"></div>
<div class="line"></div>
<!-- 一旦给粘性盒子找了个爸爸，就要注意父子高度关系 -->
<div class="wrapper">
<div class="sticky">吸顶盒子</div>
</div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<script>
// 演示：点击页面可在“失效 / 恢复”之间切换父盒子高度
const wrapper = document.querySelector('.wrapper');
let ok = true;
document.addEventListener('click', () => {
ok = !ok;
wrapper.style.height = ok ? '100px' : '60px';
console.log(ok ? '父盒子比子盒子高 -> 粘性正常' : '父子一样高 -> 粘性失效');
});
</script>
</body>
</html>要点
- 结论（转写稿原话）：粘性盒子和父盒子一样高，粘性定位失效；父盒子比粘性盒子高，粘性恢复。
- 为什么实际中的组件“一加爸爸就挂掉”：父盒子里只有它一个儿子，高度被儿子撑开，父子天然等高。
- 两种解法：① 直接给父盒子写一个比子盒子大的高度；② 往父盒子里再塞一个别的盒子（如转写稿里那个粉色 blank 盒子），父盒子被撑高即可。
- 深层特性：粘性只在父盒子的范围内生效，父盒子滚出视口，粘性也跟着结束；想让它一直粘住，父盒子要足够高。
- 易错点：以为“加了爸爸就一定能吸顶”，其实父子等高时定位直接失效；还有改高度后忘了重新编译/刷新看效果。
代码三：uni-app 中引入字体图标并使用 uni-icons
vue
<!-- App.vue：字体图标样式属于全局样式，引入到 App.vue 里 -->
<script>
export default {
onLaunch() {},
onShow() {},
onHide() {}
}
</script>
<style lang="scss">
/* 把下载下来的 iconfont.css 改名为 iconfont.scss 后放到 static/font 目录下 */
/* @ 指向项目根目录；注意这一行结尾的分号不能漏，否则 scss 编译报错 */
@import '@/static/font/iconfont.scss';
</style>vue
<!-- pages/index/index.vue -->
<template>
<view class="home">
<!-- 常规用法：公共类名 iconfont + 图标类名 -->
<text class="iconfont icon-location"></text>
<!-- 推荐用法：uni-icons 结合自定义图标，改颜色和字号非常方便 -->
<uni-icons
type="icon-location"
custom-prefix="iconfont"
color="red"
size="40"
/>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="scss">
.home {
padding: 20rpx;
}
</style>要点
- 字体图标属于全局样式，所以样式文件引入到
App.vue，用@import '@/static/font/iconfont.scss';，@指向项目根目录。 - 下载下来的文件是
.css，转写稿里改名为.scss后再引入；分号漏写会直接报错，这是实际中踩到的低级错误。 - 常规用法就是网页那套：
class="iconfont icon-location"，类名可以去 iconfont 下载包的样式文件里查。 uni-icons用自定义图标时，type写类名（如icon-location），还必须加custom-prefix="iconfont"，否则组件只认内置图标，图标不出来。- 易错点：
uni-icons属于扩展组件，必须先下载安装 uni_modules 才能用，没装直接写标签是不显示的。 - 用
uni-icons的优势：颜色直接color、字号直接size，不用再写额外的 CSS，所以推荐用这种方式。
常见错误
粘性定位完全不生效（连滚动都不吸顶）
- 现象：写了
position: sticky，滚动时元素跟着一起滚走。 - 原因：只写了
position，没有写top（或left等）偏移值。 - 修法：补上
top: 0（或需要的距离值），二者必须成对出现。
- 现象：写了
加了父盒子后粘性定位突然失效
- 现象：不包父盒子时正常吸顶，一包上
div就不吸了。 - 原因：父盒子只有粘性盒子一个子元素，高度被子元素撑开，父子一样高，粘性没有可移动余量。
- 修法：让父盒子比粘性盒子高——给父盒子设
min-height/height、加padding，或把占位盒子（原 blank）放成粘性盒子的兄弟节点。
- 现象：不包父盒子时正常吸顶，一包上
吸顶后滚一段距离又"跑掉"了
- 现象：一开始能吸住，父容器滚出视口时突然跟着走。
- 原因：粘性定位的移动范围被父容器限制，父容器到底了粘性就结束（特性，非 bug）。
- 修法：实际开发中把粘性盒子放在足够高的容器里（通常整个页面级容器），不要塞进很矮的小盒子。
tabBar 下划线指示器位置偏左/偏右
- 现象：tabBar 不是贴着页面最左边时，高亮下划线不居中。
- 原因：指示器是相对 tabBar 做绝对定位的，参考系是父盒子；计算时只用了"元素距页面左边距离"，漏掉了父盒子距页面左边的距离。
- 修法：
(元素距页面左边距离 − 父盒子距页面左边距离 − 指示器宽度 / 2)，先减父级偏移再算居中。
创建项目时模板选成 Vue2
- 现象：后面讲义里的组合式 API 代码复制进去跑不通、报语法错。
- 原因：新建项目时勾错了版本。
- 修法：新建时明确选 Vue3；已建错的删掉重建，别硬改。
先配 tabBar 再建页面 / 图标路径不对
- 现象：编译报错找不到页面路径，或 tabBar 图标空白。
- 原因：
pages里的路径没有对应文件；图标没有放进static目录或路径写错。 - 修法：先建好 4 个页面并注册，再配 tabBar；图标统一放
static下，路径从static/起写。
.prettierrc配置不生效- 现象：保存后代码风格没变，仍不是两个空格/单引号。
- 原因：文件名写错（多写或少写字母、当成普通文件名）、或没放在项目根目录。
- 修法：根目录下建无文件名、只有
.prettierrc后缀的配置文件，字母逐个核对。
字体图标引入报错或图标不显示
- 现象：编译报 CSS 语法错，或页面上是个空白方块。
- 原因：
@import语句末尾漏分号；样式文件没从.css改名为.scss；类名写错。 - 修法：补分号、改后缀、到
iconfont.scss里核对类名；@import用@/static/...路径。
用
uni-icons显示自定义图标时是空白- 现象：内置图标正常，换成自己的图标名就没反应。
- 原因：① 扩展组件没安装；② 自定义图标没加
custom-prefix。 - 修法：插件市场把
uni-icons安装到当前项目并重新编译；自定义图标补custom-prefix="iconfont"。
多色图标在小程序端不显示
- 现象：H5 正常，小程序端一片空白。
- 原因：多色图标依赖
svg标签 + symbol 方式，小程序不支持该标签。 - 修法：多端项目改用兼容方案（后续小节的做法），或该处退回单色字体图标。
练习
粘性定位排错：给出一段结构——外层
div内只有一个position: sticky; top: 0的盒子，滚动时无吸顶效果。请用两种不同方式修复（一种改父级高度，一种改结构），并说明各自适用场景。指示器居中公式：tabBar 距离页面左边 40px，某个 tab 项距离页面左边 200px，指示器宽 30px。写出计算指示器
left值的完整公式并算出结果；再把 tabBar 整体右移 100px，说明结果为什么不变。项目初始化清单：从零完成——创建 Vue3 项目（命名与讲义一致）→ 根目录建
.prettierrc→ 建 4 个 tabBar 页面 → 拷贝图标到static→ 配好 tabBar 并跑通四个页面切换。写下令你卡住的那一步及原因。字体图标接入：把下载的图标包解压，字体文件与样式文件放入
static，样式文件改名为.scss并在App.vue中@import引入，然后在首页分别用"常规类名"和"uni-icons+custom-prefix"两种方式各显示一个图标，后者设成红色、字号 40。多色图标对比：用 symbol 方式在 H5 端显示一个多色图标，再运行到小程序端观察结果，记录差异并写出你的替代方案。
课堂画面
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 学习反馈及粘性定位补充 | 18:48 |
| 2 | 优医咨询-创建项目 | 04:20 |
| 3 | 优医咨询-配置tabBar | 04:09 |
| 4 | 优医咨询-全局样式 | 04:48 |
| 5 | 优医咨询-制作并导入字体图标 | 10:43 |
| 6 | 优医咨询-自定义字体图标与uni-icons | 09:24 |
| 7 | 优医咨询-多色图标介绍 | 04:07 |
小结
position: sticky必须配偏移值才生效，这是最容易被忽略的第一步。- 粘性盒子的父级必须比它高，父子等高是吸顶失效的头号元凶；"加高父级"和"加兄弟元素"本质是同一件事。
- 粘性定位的作用范围被父容器限制，父容器滚出视口它就结束——这是特性，实际开发要把粘性盒子放在足够高的容器中。
- 用绝对定位做指示器时，参考系永远是父盒子，所有计算都要先把父级偏移减掉，这样组件换位置也不跑偏。
- 项目阶段的命名、目录必须和讲义严格一致，否则后续复制代码会产生大量"隐形"错误。
- 项目创建时版本选 Vue3；团队风格统一靠根目录
.prettierrc，一个项目一份配置。 - 全局样式写
App.vue，公共变量和混合写uni.scss，字体图标样式也引入App.vue成为全局可用。 - 字体图标在 uniapp 中的使用流程与网页完全一致（制作 → 下载放入项目 → 引入样式 → 用类名），且 uniapp 打包时会转 base64，本地路径可用；推荐用
uni-icons+custom-prefix的方式，改色改字号更省事。 - 多色图标靠
svg+ symbol 实现，小程序端不支持，多端项目必须准备替代方案。