sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

阿里图标库引入

Browse Source
This commit is contained in:
冯辉
2025-10-20 16:15:29 +08:00
parent d9c1f83693
commit 968e6b4091
29 changed files with 3718 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
docs/H5端CSS引入问题解决方案.md Normal file
View File

@@ -0,0 +1,318 @@
# H5端CSS引入问题解决方案
## ❌ 错误提示
```
iconfont.css:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.
```
## 🔍 问题原因
在 `main.js` 中使用了 **错误的方式** 引入CSS文件：
```javascript
// ❌ 错误：尝试将CSS作为JavaScript模块导入
import './static/iconfont/iconfont.css'
```
这种 `import` 语法在H5端会导致浏览器尝试将CSS文件作为JavaScript模块加载，从而产生MIME类型错误。
## ✅ 解决方案
### 方案一：在 App.vue 中使用 @import（推荐）
在 `App.vue` 的 `<style>` 标签中使用CSS的 `@import` 语法：
```vue
<style>
/* 引入阿里图标库 */
@import url("/static/iconfont/iconfont.css");
</style>
```
**优点：**
- ✅ 所有平台兼容（H5、小程序、App）
- ✅ 符合CSS规范
- ✅ 全局生效
### 方案二：条件编译（如果必须在 main.js 中引入）
如果确实需要在 `main.js` 中引入，使用条件编译：
```javascript
// #ifndef H5
import './static/iconfont/iconfont.css'
// #endif
```
然后在 `App.vue` 中单独为H5引入：
```vue
<style>
/* #ifdef H5 */
@import url("/static/iconfont/iconfont.css");
/* #endif */
</style>
```
## 📋 CSS引入方式对比
### JavaScript import（不推荐用于CSS）
```javascript
// ❌ 在 main.js 中
import './static/iconfont/iconfont.css'
```
**问题：**
- H5端会报MIME类型错误
- 将CSS当作JavaScript模块处理
### CSS @import（推荐）
```vue
<!-- ✅ 在 App.vue 或其他 .vue 文件中 -->
<style>
@import url("/static/iconfont/iconfont.css");
</style>
```
**优点：**
- 所有平台兼容
- 符合CSS标准
- 不会产生MIME类型错误
### 使用 <style> 标签的 src 属性（可选）
```vue
<style src="/static/iconfont/iconfont.css"></style>
```
## 🔧 修复步骤
### Step 1: 删除 main.js 中的CSS import
打开 `main.js`，找到并删除或注释掉：
```javascript
// import './static/iconfont/iconfont.css' // 删除这行
```
### Step 2: 确认 App.vue 中的引入
确保 `App.vue` 中有正确的CSS引入：
```vue
<style>
@import '@/common/animation.css';
@import '@/common/common.css';
/* 引入阿里图标库 */
@import url("/static/iconfont/iconfont.css");
</style>
```
### Step 3: 清除缓存并重新编译
1. 关闭开发服务器
2. 清除浏览器缓存
3. 重新运行 `npm run dev:h5` 或点击HBuilderX的运行按钮
## 🎯 最佳实践
### 全局CSS引入位置
**推荐顺序：**
```vue
<!-- App.vue -->
<style>
/* 1. 重置样式 / 通用样式 */
@import '@/common/reset.css';
@import '@/common/common.css';
/* 2. 第三方库样式 */
@import url("/static/iconfont/iconfont.css");
/* 3. 动画效果 */
@import '@/common/animation.css';
/* 4. 项目全局样式 */
/* 自定义全局样式 */
</style>
```
### 路径写法
**绝对路径（推荐）：**
```css
@import url("/static/iconfont/iconfont.css");
```
**相对路径：**
```css
@import url("./static/iconfont/iconfont.css");
@import url("@/static/iconfont/iconfont.css");
```
**注意：** 在不同平台上路径解析可能有差异，推荐使用绝对路径。
## 🚫 常见错误
### 错误1：在 main.js 中 import CSS
```javascript
// ❌ 错误
import './styles/global.css'
import '@/static/iconfont/iconfont.css'
```
**解决：** 改用 App.vue 的 `@import`
### 错误2：路径不正确
```css
/* ❌ 错误：路径错误 */
@import url("static/iconfont/iconfont.css");
/* ✅ 正确：使用正确的路径 */
@import url("/static/iconfont/iconfont.css");
```
### 错误3：缺少分号
```css
/* ❌ 错误：缺少分号 */
@import url("/static/iconfont/iconfont.css")
/* ✅ 正确：添加分号 */
@import url("/static/iconfont/iconfont.css");
```
### 错误4：在 scoped 样式中引入
```vue
<!-- ❌ 不推荐：在 scoped 样式中引入全局CSS -->
<style scoped>
@import url("/static/iconfont/iconfont.css");
</style>
<!-- ✅ 推荐：全局样式不要加 scoped -->
<style>
@import url("/static/iconfont/iconfont.css");
</style>
```
## 📊 平台兼容性
| 引入方式 | H5 | 小程序 | App | 推荐 |
|---------|----|----|-----|-----|
| main.js import | ❌ | ✅ | ✅ | ❌ |
| App.vue @import | ✅ | ✅ | ✅ | ✅ |
| style src | ✅ | ✅ | ✅ | ✅ |
| 条件编译 | ✅ | ✅ | ✅ | ⚠️ |
## 🔍 调试方法
### 1. 检查CSS是否加载
在浏览器开发者工具中：
```
F12 → Network → Filter: CSS → 查找 iconfont.css
```
**成功标志：**
- 状态码：200
- Type: stylesheet
- Size: 文件大小正常
### 2. 检查字体文件
```
F12 → Network → Filter: Font → 查找 iconfont.ttf/woff
```
### 3. 检查控制台错误
```
F12 → Console → 查看是否有错误信息
```
### 4. 验证样式生效
```javascript
// 在控制台执行
document.querySelector('.iconfont')
// 应该能找到使用了 iconfont 类的元素
```
## ✅ 验证成功
修复后，应该看到：
1. ✅ H5端控制台无CSS加载错误
2. ✅ 图标正常显示
3. ✅ Network 中 iconfont.css 状态码为 200
4. ✅ 字体文件正常加载
## 📝 注意事项
### uni-app 项目特点
1. **多平台编译**
- H5端使用浏览器标准
- 小程序有自己的规范
- App使用原生渲染
2. **路径处理**
- `@/` 代表项目根目录
- `/static/` 代表静态资源目录
- 不同平台路径解析略有差异
3. **样式隔离**
- `scoped` 样式只在当前组件生效
- 全局样式在 App.vue 中引入
- 不要在 scoped 中引入全局CSS
### Vite 项目特点
如果使用 Vite 构建（HBuilderX 3.2+）：
```javascript
// main.js 中可以使用（但不推荐）
import './static/iconfont/iconfont.css'
```
但为了兼容性，仍然推荐在 App.vue 中使用 `@import`。
## 🎉 总结
### 问题
在 `main.js` 中使用 `import` 引入CSS导致H5端报错。
### 解决
1. ✅ 删除 `main.js` 中的 CSS import
2. ✅ 在 `App.vue` 的 `<style>` 中使用 `@import`
3. ✅ 重启开发服务器
### 最佳实践
- 所有全局CSS在 `App.vue` 中通过 `@import` 引入
- 使用绝对路径：`/static/...`
- 不要在 `scoped` 样式中引入全局CSS
- 保持引入顺序：重置 → 第三方 → 动画 → 自定义
## 📚 相关文档
- [uni-app 样式导入](https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E6%A0%B7%E5%BC%8F%E5%AF%BC%E5%85%A5)
- [CSS @import](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import)
- [Vite 静态资源处理](https://cn.vitejs.dev/guide/assets.html)
---
**该问题已解决！** 🎉
现在H5端应该可以正常加载CSS文件了。如果还有问题，请检查：
1. 文件路径是否正确
2. 是否清除了浏览器缓存
3. 是否重启了开发服务器

442
docs/HBuilderX小程序编译错误解决方案.md Normal file
View File

@@ -0,0 +1,442 @@
# HBuilderX小程序编译错误解决方案
## 错误信息
```
[vite]: Rollup failed to resolve import "@dcloudio/uni-ui/lib/uni-button/uni-button.vue" from "components/MsgTips/MsgTips.vue".
[@vue/compiler-sfc] `defineExpose` is a compiler macro and no longer needs to be imported.
[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
[@vue/compiler-sfc] `defineEmits` is a compiler macro and no longer needs to be imported.
```
## 问题分析
### 问题1：uni-button 组件未安装
**原因：**
- `uni-button` 不是 uni-app 的内置组件
- 项目中使用了 `<uni-button>` 但没有安装 `@dcloudio/uni-ui` 完整包
- 只安装了部分组件（uni-popup、uni-icons等）
**解决方案：**
使用原生 `<button>` 替代 `<uni-button>`
### 问题2：Vue编译器宏错误导入
**原因：**
- `defineProps`、`defineEmits`、`defineExpose` 是 Vue 3 的编译器宏
- 它们由编译器自动注入，不需要从 vue 中导入
- 在 `<script setup>` 中可以直接使用
**错误写法：**
```javascript
import { defineProps, defineEmits, defineExpose } from 'vue'
```
**正确写法：**
```javascript
// 无需导入，直接使用
const props = defineProps({...})
const emit = defineEmits([...])
defineExpose({...})
```
## ✅ 已修复的文件
### 1. components/MsgTips/MsgTips.vue
**修改内容：**
- ✅ 将 `<uni-button>` 替换为 `<button>`
- ✅ 添加了 button 样式重置
**修改前：**
```vue
<uni-button class="popup-button" @click="close">确定</uni-button>
```
**修改后：**
```vue
<button class="popup-button" @click="close">确定</button>
```
**样式重置：**
```scss
button {
padding: 0;
margin: 0;
border: none;
background: none;
font-size: inherit;
line-height: inherit;
}
button::after {
border: none;
}
```
### 2. pages/chat/components/ai-paging.vue
**修改内容：**
- ✅ 移除 `defineProps` 和 `defineEmits` 的导入
**修改前：**
```javascript
import {
ref,
defineProps,
defineEmits,
// ...
} from 'vue';
```
**修改后：**
```javascript
import {
ref,
// 移除了 defineProps 和 defineEmits
// ...
} from 'vue';
```
### 3. components/tabbar/midell-box.vue
**修改内容：**
- ✅ 移除 `defineProps` 的导入
### 4. pages/chat/components/popupbadFeeback.vue
**修改内容：**
- ✅ 移除 `defineEmits` 的导入
### 5. components/selectJobs/selectJobs.vue
**修改内容：**
- ✅ 移除 `defineExpose` 的导入
### 6. components/renderJobs/renderJobsCheckBox.vue
**修改内容：**
- ✅ 移除 `defineExpose` 的导入
## 📋 Vue 3 Composition API 编译器宏
### 什么是编译器宏？
编译器宏是 Vue 3 在 `<script setup>` 中提供的特殊函数，由编译器在编译时处理，不是运行时的函数。
### 常用编译器宏
| 宏名称 | 作用 | 是否需要导入 |
|--------|------|------------|
| `defineProps` | 定义组件 props | ❌ 不需要 |
| `defineEmits` | 定义组件事件 | ❌ 不需要 |
| `defineExpose` | 暴露组件方法/属性 | ❌ 不需要 |
| `withDefaults` | 为 props 设置默认值 | ❌ 不需要 |
| `defineOptions` | 定义组件选项 | ❌ 不需要 |
| `defineSlots` | 定义插槽类型 | ❌ 不需要 |
| `defineModel` | 定义 v-model | ❌ 不需要 |
### 正确使用示例
```vue
<script setup>
// ✅ 正确：直接使用，无需导入
const props = defineProps({
name: String,
age: Number
})
const emit = defineEmits(['update', 'change'])
defineExpose({
open,
close
})
// ❌ 错误：不要从 vue 导入
// import { defineProps } from 'vue'
</script>
```
## 🔧 替代方案
### 如果确实需要 uni-ui
如果项目中大量使用了 uni-ui 组件，可以安装完整的 uni-ui：
```bash
npm install @dcloudio/uni-ui
```
然后在 `pages.json` 中配置：
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}
}
```
### 使用原生组件的优势
1. ✅ **更小的包体积** - 不需要引入额外的库
2. ✅ **更好的兼容性** - 原生组件在所有平台都可用
3. ✅ **更快的编译速度** - 减少依赖解析
4. ✅ **更灵活的样式** - 可以完全自定义
## 🎯 button vs uni-button 对比
### 原生 button
```vue
<button class="custom-btn" @click="handleClick">
点击我
</button>
<style>
.custom-btn {
width: 100%;
height: 80rpx;
background: #256BFA;
color: white;
border-radius: 12rpx;
border: none;
}
button::after {
border: none; /* 移除默认边框 */
}
</style>
```
**优点：**
- ✅ 无需安装依赖
- ✅ 完全自定义样式
- ✅ 支持所有平台
- ✅ 性能更好
**缺点：**
- ⚠️ 需要手动重置样式
- ⚠️ 需要自己实现 loading、disabled 等状态
### uni-button
```vue
<uni-button type="primary" @click="handleClick">
点击我
</uni-button>
```
**优点：**
- ✅ 内置多种样式
- ✅ 自带 loading、disabled 状态
- ✅ 统一的UI风格
**缺点：**
- ❌ 需要安装 uni-ui
- ❌ 增加包体积
- ❌ 自定义样式受限
## 📝 button 样式重置模板
推荐在全局样式中添加 button 重置：
```css
/* App.vue 或 common.css */
/* 重置 button 默认样式 */
button {
padding: 0;
margin: 0;
border: none;
background: none;
font-size: inherit;
font-family: inherit;
color: inherit;
line-height: inherit;
text-align: inherit;
cursor: pointer;
box-sizing: border-box;
}
/* 移除微信小程序 button 的默认边框 */
button::after {
border: none;
}
/* 移除 button 按下时的背景色 */
button:active {
background-color: inherit;
}
/* 通用按钮样式 */
.btn {
display: inline-block;
padding: 20rpx 40rpx;
border-radius: 12rpx;
text-align: center;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(135deg, #13C57C 0%, #0FA368 100%);
color: #FFFFFF;
box-shadow: 0 8rpx 20rpx rgba(19, 197, 124, 0.3);
}
.btn-secondary {
background: #F7F8FA;
color: #666666;
}
```
## ⚠️ 注意事项
### 1. 编译器宏的特殊性
```javascript
// ❌ 错误：不能解构或重命名
import { defineProps as props } from 'vue'
// ❌ 错误：不能在条件语句中使用
if (someCondition) {
defineProps({...})
}
// ✅ 正确：直接在顶层使用
const props = defineProps({...})
```
### 2. TypeScript 支持
如果使用 TypeScript，编译器宏会自动获得类型支持：
```typescript
<script setup lang="ts">
// 自动获得类型提示
const props = defineProps<{
name: string
age?: number
}>()
const emit = defineEmits<{
update: [value: string]
change: [id: number]
}>()
</script>
```
### 3. 在非 setup 语法中
如果不使用 `<script setup>`，需要用传统方式：
```vue
<script>
export default {
props: {
name: String
},
emits: ['update'],
setup(props, { emit, expose }) {
// ...
expose({ open, close })
}
}
</script>
```
## ✅ 验证修复
修复后，重新编译项目应该看到：
1. ✅ 没有 "Rollup failed to resolve import" 错误
2. ✅ 没有 "defineXxx is a compiler macro" 警告
3. ✅ 小程序正常编译和运行
4. ✅ 按钮样式显示正常
## 🔍 排查步骤
如果修复后仍然有问题：
### 1. 清除缓存
```
HBuilderX:
运行 → 停止运行
工具 → 清除缓存
重新运行
```
### 2. 检查所有文件
使用全局搜索检查是否还有遗漏：
```
Ctrl + Shift + F
搜索: import.*defineProps
搜索: import.*defineEmits
搜索: import.*defineExpose
```
### 3. 检查 pages.json
确保 easycom 配置正确：
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}
}
```
### 4. 重新安装依赖
```bash
# 删除 node_modules 和 lock 文件
rm -rf node_modules
rm package-lock.json
# 重新安装
npm install
```
## 📚 相关文档
- [Vue 3 script setup 文档](https://cn.vuejs.org/api/sfc-script-setup.html)
- [uni-app button 组件](https://uniapp.dcloud.net.cn/component/button.html)
- [uni-ui 文档](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)
- [Vite 构建优化](https://cn.vitejs.dev/guide/dep-pre-bundling.html)
## 🎉 总结
### 问题
1. 使用了未安装的 `uni-button` 组件
2. 错误地从 vue 导入了编译器宏
### 解决
1. ✅ 将 `<uni-button>` 替换为 `<button>`
2. ✅ 移除所有编译器宏的 import 语句
3. ✅ 添加 button 样式重置
### 最佳实践
- 优先使用原生组件
- 不要导入 Vue 编译器宏
- 保持依赖简洁
- 定期清理未使用的代码
---
**所有错误已修复！** 🎉
现在可以正常编译和运行小程序了。

284
docs/微信小程序组件依赖问题解决方案.md Normal file
View File

@@ -0,0 +1,284 @@
# 微信小程序组件依赖问题解决方案
## 问题描述
```
components/IconfontIcon/IconfontIcon.js 已被代码依赖分析忽略，无法被其他模块引用。
你可根据控制台中的【代码依赖分析】告警信息修改代码，或关闭【过滤无依赖文件】功能。
```
## 问题原因
1. **组件未被正确引用** - 组件文件存在但没有被任何页面或组件引用
2. **缺少 easycom 配置** - uni-app 项目需要在 `pages.json` 中配置组件自动引入
3. **文件路径问题** - 组件路径不正确或文件名不匹配
## ✅ 解决方案
### 方案一：配置 easycom 自动引入（推荐）✨
在 `pages.json` 中添加 `easycom` 配置：
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
"^IconfontIcon$": "@/components/IconfontIcon/IconfontIcon.vue",
"^WxAuthLogin$": "@/components/WxAuthLogin/WxAuthLogin.vue"
}
}
}
```
**配置说明：**
- `autoscan: true` - 自动扫描 `components` 目录
- `custom` - 自定义组件路径映射
- `^IconfontIcon$` - 组件名称（大小写敏感）
- 配置后无需 import，直接在模板中使用
**使用方式：**
```vue
<template>
<!-- 无需 import，直接使用 -->
<IconfontIcon name="home" :size="48" />
<WxAuthLogin ref="loginRef" />
</template>
```
### 方案二：手动引入组件
如果不想使用 easycom，可以在需要的页面手动引入：
```vue
<script setup>
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
</script>
<template>
<IconfontIcon name="home" />
</template>
```
### 方案三：关闭"过滤无依赖文件"功能
如果组件确实暂时不需要使用，可以在微信开发者工具中关闭此功能：
1. 打开微信开发者工具
2. 点击右上角"详情"
3. 找到"本地设置"标签
4. 取消勾选"过滤无依赖文件"
**注意：** 不推荐此方法，因为会增加打包体积。
## 🔧 完整操作步骤
### Step 1: 确认文件结构
确保组件文件存在且路径正确：
```
components/
├── IconfontIcon/
│ └── IconfontIcon.vue ✅ 文件存在
└── WxAuthLogin/
└── WxAuthLogin.vue ✅ 文件存在
```
### Step 2: 修改 pages.json
已为你自动添加了 easycom 配置，位置在 `globalStyle` 后面。
### Step 3: 重启微信开发者工具
1. 关闭微信开发者工具
2. 重新打开项目
3. 等待编译完成
### Step 4: 清除缓存
如果问题仍然存在：
1. 点击顶部菜单"工具" → "清除缓存"
2. 选择"清除文件缓存"
3. 重新编译项目
### Step 5: 验证组件可用
在任意页面中测试：
```vue
<template>
<view>
<IconfontIcon name="home" :size="48" color="#13C57C" />
</view>
</template>
<script setup>
// 使用 easycom 后无需 import
</script>
```
## 📋 配置详解
### easycom 规则说明
```json
{
"easycom": {
// 是否自动扫描 components 目录
"autoscan": true,
// 自定义规则
"custom": {
// 格式: "匹配规则": "组件路径"
"^IconfontIcon$": "@/components/IconfontIcon/IconfontIcon.vue"
}
}
}
```
**匹配规则说明：**
- `^` - 字符串开始
- `$` - 字符串结束
- `^IconfontIcon$` - 精确匹配 `IconfontIcon`
- `^uni-(.*)` - 匹配所有 `uni-` 开头的组件
### 组件命名规范
**推荐命名：**
- ✅ `IconfontIcon` - 大驼峰命名
- ✅ `WxAuthLogin` - 大驼峰命名
- ✅ `MyCustomComponent` - 大驼峰命名
**不推荐：**
- ❌ `iconfontIcon` - 小驼峰
- ❌ `iconfont-icon` - 短横线
- ❌ `Iconfont_Icon` - 下划线
## 🎯 常见问题
### Q1: 配置后仍然报错？
**解决方法：**
1. 检查 `pages.json` 语法是否正确（JSON格式）
2. 确认组件路径是否正确
3. 重启微信开发者工具
4. 清除缓存后重新编译
### Q2: 组件找不到？
**检查清单：**
- [ ] 文件路径是否正确：`@/components/IconfontIcon/IconfontIcon.vue`
- [ ] 文件名大小写是否一致
- [ ] 组件名称是否与配置匹配
- [ ] 是否重启了开发者工具
### Q3: 在页面中使用组件报错？
**常见原因：**
```vue
<!-- ❌ 错误：使用了短横线命名 -->
<iconfont-icon name="home" />
<!-- ✅ 正确：使用大驼峰命名 -->
<IconfontIcon name="home" />
```
### Q4: 多个组件如何配置？
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
"^IconfontIcon$": "@/components/IconfontIcon/IconfontIcon.vue",
"^WxAuthLogin$": "@/components/WxAuthLogin/WxAuthLogin.vue",
"^CustomButton$": "@/components/CustomButton/CustomButton.vue"
}
}
}
```
### Q5: autoscan 和 custom 的区别？
**autoscan（自动扫描）：**
```
components/
├── CustomButton/
│ └── CustomButton.vue → 自动识别为 <CustomButton>
├── MyCard/
│ └── MyCard.vue → 自动识别为 <MyCard>
```
**custom（自定义规则）：**
```json
{
"custom": {
"^Button$": "@/components/CustomButton/CustomButton.vue"
}
}
```
使用 `<Button>` 会映射到 `CustomButton.vue`
## 🔍 调试方法
### 1. 查看编译日志
在微信开发者工具控制台查看编译信息：
```
点击顶部"编译" → 查看控制台输出
```
### 2. 检查组件是否被打包
1. 打开"详情" → "本地设置"
2. 查看"代码依赖分析"信息
3. 确认组件是否在依赖树中
### 3. 手动引入测试
```vue
<script setup>
// 临时测试：手动引入
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
console.log('组件加载成功:', IconfontIcon)
</script>
```
## ✅ 验证成功标志
配置成功后，应该看到：
1. ✅ 微信开发者工具控制台无警告
2. ✅ 组件可以正常显示
3. ✅ 无需 import 即可使用
4. ✅ 组件出现在代码依赖分析中
## 📚 相关文档
- [uni-app easycom 文档](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)
- [微信小程序代码依赖分析](https://developers.weixin.qq.com/miniprogram/dev/devtools/codecompile.html)
- [组件化开发文档](https://uniapp.dcloud.net.cn/tutorial/vue3-components.html)
## 🎉 总结
该问题已通过以下方式解决：
1. ✅ 在 `pages.json` 中添加了 `easycom` 配置
2. ✅ 配置了 `IconfontIcon` 和 `WxAuthLogin` 组件的自动引入
3. ✅ 组件现在可以在任何页面中直接使用，无需 import
**下一步：**
- 重启微信开发者工具
- 清除缓存
- 开始使用组件
如果问题仍然存在，请检查：
1. 文件路径是否正确
2. 文件名大小写是否一致
3. pages.json 语法是否正确
4. 是否已重启开发者工具

109
docs/滚动隐藏功能修复报告.md Normal file
View File

@@ -0,0 +1,109 @@
# 首页滚动隐藏功能修复报告
## 问题描述
用户反馈：列表区域向上滚动时，上面的区域（搜索栏、附近工作卡片、服务图标网格）没有隐藏，导致下面的职位列表显示区域被压缩得很小。
## 修复方案
### 1. **简化滚动逻辑**
- 移除了复杂的触摸手势处理
- 移除了 `requestAnimationFrame` 的复杂节流处理
- 使用简单直接的滚动位置判断
### 2. **优化滚动阈值**
```javascript
const HIDE_THRESHOLD = 50; // 向下滚动50px后隐藏顶部区域
const SHOW_THRESHOLD = 5; // 滚动到顶部5px内显示顶部区域
const STICKY_THRESHOLD = 80; // 滚动80px后筛选区域吸顶
```
### 3. **简化CSS动画**
```css
.hidden-animation {
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
overflow: hidden;
opacity: 1;
transform: translateY(0);
}
.hidden-height {
opacity: 0 !important;
transform: translateY(-100%) !important;
pointer-events: none !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
```
### 4. **核心滚动处理函数**
```javascript
function handleScroll(e) {
const currentScrollTop = e.detail.scrollTop || 0;
// 简单的滚动逻辑：向下滚动超过阈值就隐藏，滚动到顶部就显示
if (currentScrollTop > HIDE_THRESHOLD) {
if (!shouldHideTop.value) {
shouldHideTop.value = true;
}
} else if (currentScrollTop <= SHOW_THRESHOLD) {
if (shouldHideTop.value) {
shouldHideTop.value = false;
}
}
// 控制筛选区域吸顶
if (currentScrollTop > STICKY_THRESHOLD) {
if (!shouldStickyFilter.value) {
shouldStickyFilter.value = true;
}
} else {
if (shouldStickyFilter.value) {
shouldStickyFilter.value = false;
}
}
// 更新滚动位置
lastScrollTop.value = currentScrollTop;
scrollTop.value = currentScrollTop;
}
```
## 测试方法
### 1. **手动测试**
- 点击右上角的红色"测试"按钮，验证CSS动画是否正常工作
- 按钮文字会显示当前状态："测试: 隐藏" 或 "测试: 显示"
### 2. **滚动测试**
- 向下滚动列表区域超过50px，顶部区域应该自动隐藏
- 滚动回到顶部（5px内），顶部区域应该自动显示
- 滚动超过80px，筛选区域应该吸顶显示
## 预期效果
1. **向下滚动 > 50px**：顶部区域（搜索栏、附近工作卡片、服务图标）平滑向上滑出隐藏
2. **滚动到顶部 < 5px**：顶部区域平滑向下滑入显示
3. **滚动 > 80px**：筛选区域吸顶显示，提供更好的导航体验
## 技术特点
- ✅ **简单可靠**：移除了复杂的逻辑，使用最直接的滚动位置判断
- ✅ **性能优化**：使用CSS硬件加速，流畅的动画效果
- ✅ **跨平台兼容**：支持微信小程序、H5、App
- ✅ **用户体验**：平滑的动画过渡，符合Material Design规范
## 后续优化建议
1. **移除测试按钮**：确认功能正常后，删除临时测试按钮
2. **调整阈值**：根据实际使用情况，可以微调滚动阈值
3. **添加用户偏好**：可以考虑添加设置选项，让用户选择是否启用自动隐藏
## 文件修改
- `pages/index/components/index-one.vue` - 主要修改文件
- `docs/首页滚动优化说明.md` - 详细技术文档
---
**注意**：当前版本包含一个临时的红色测试按钮，用于验证功能是否正常工作。确认功能正常后，请删除测试按钮。

429
docs/阿里图标库引入指南.md Normal file
View File

@@ -0,0 +1,429 @@
# 阿里图标库（iconfont）引入指南
## 📦 方式一：使用字体文件（推荐）
### 第一步：下载图标资源
1. 访问 [阿里图标库](https://www.iconfont.cn/)
2. 注册/登录账号
3. 搜索需要的图标，点击"添加入库"
4. 点击右上角购物车图标
5. 点击"添加至项目"（如果没有项目，先创建一个）
6. 进入"我的项目"
7. 点击"下载至本地"按钮
### 第二步：解压并复制文件
下载的压缩包中包含以下文件：
```
iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2
iconfont.json
demo_index.html
demo.css
```
**需要的文件：**
- `iconfont.css` - 样式文件
- `iconfont.ttf` - 字体文件
- `iconfont.woff` - 字体文件
- `iconfont.woff2` - 字体文件
### 第三步：创建项目目录
在项目中创建 `static/iconfont/` 目录（如果不存在）：
```
ks-app-employment-service/
├── static/
│ ├── iconfont/ ← 新建此目录
│ │ ├── iconfont.css
│ │ ├── iconfont.ttf
│ │ ├── iconfont.woff
│ │ └── iconfont.woff2
│ └── ...
```
### 第四步：修改 CSS 文件
打开 `static/iconfont/iconfont.css`，修改字体文件路径：
**原始路径：**
```css
@font-face {
font-family: "iconfont";
src: url('iconfont.woff2?t=1234567890') format('woff2'),
url('iconfont.woff?t=1234567890') format('woff'),
url('iconfont.ttf?t=1234567890') format('truetype');
}
```
**修改为（相对路径）：**
```css
@font-face {
font-family: "iconfont";
src: url('./iconfont.woff2?t=1234567890') format('woff2'),
url('./iconfont.woff?t=1234567890') format('woff'),
url('./iconfont.ttf?t=1234567890') format('truetype');
}
```
**或修改为（绝对路径，推荐）：**
```css
@font-face {
font-family: "iconfont";
src: url('/static/iconfont/iconfont.woff2?t=1234567890') format('woff2'),
url('/static/iconfont/iconfont.woff?t=1234567890') format('woff'),
url('/static/iconfont/iconfont.ttf?t=1234567890') format('truetype');
}
```
### 第五步：在项目中引入
#### 方法 A：全局引入（App.vue）
在 `App.vue` 中引入：
```vue
<style>
/* 引入阿里图标库 */
@import url("/static/iconfont/iconfont.css");
/* 其他全局样式 */
@import '@/common/animation.css';
@import '@/common/common.css';
</style>
```
#### 方法 B：在 main.js 中引入
```javascript
// main.js
import './static/iconfont/iconfont.css'
```
### 第六步：使用图标
#### 使用方式 1：Unicode 方式
```vue
<template>
<view class="icon">&#xe600;</view>
</template>
<style>
.icon {
font-family: "iconfont" !important;
font-size: 32rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
```
#### 使用方式 2：Font Class 方式（推荐）
```vue
<template>
<view class="iconfont icon-home"></view>
<view class="iconfont icon-user"></view>
<view class="iconfont icon-search"></view>
</template>
<style scoped>
.iconfont {
font-size: 32rpx;
color: #333;
}
</style>
```
#### 使用方式 3：封装为组件
创建 `components/IconfontIcon/IconfontIcon.vue`：
```vue
<template>
<text class="iconfont" :class="iconClass" :style="iconStyle"></text>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
name: {
type: String,
required: true
},
size: {
type: [String, Number],
default: 32
},
color: {
type: String,
default: '#333'
}
})
const iconClass = computed(() => `icon-${props.name}`)
const iconStyle = computed(() => ({
fontSize: `${props.size}rpx`,
color: props.color
}))
</script>
<style scoped>
.iconfont {
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
```
**使用组件：**
```vue
<template>
<IconfontIcon name="home" :size="48" color="#13C57C" />
<IconfontIcon name="user" :size="36" color="#256BFA" />
</template>
<script setup>
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
</script>
```
---
## 📦 方式二：使用在线链接（不推荐小程序）
### 第一步：获取在线链接
1. 在阿里图标库"我的项目"中
2. 点击"Font class"
3. 点击"查看在线链接"
4. 复制 CSS 链接
### 第二步：引入在线 CSS
在 `App.vue` 中：
```vue
<style>
/* 注意：小程序不支持在线字体 */
@import url("//at.alicdn.com/t/c/font_xxxxx.css");
</style>
```
**⚠️ 注意：** 微信小程序不支持外部字体文件，必须使用方式一！
---
## 📦 方式三：使用 Symbol 方式（SVG）
### 第一步：获取 Symbol 代码
1. 在"我的项目"中
2. 点击"Symbol"
3. 点击"生成代码"
4. 复制生成的 JS 链接
### 第二步：下载 JS 文件
将 JS 文件下载到 `static/iconfont/iconfont.js`
### 第三步：引入并使用
在 `App.vue` 或需要的页面中：
```vue
<template>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
</template>
<script>
// 引入 Symbol 脚本
// 注意：需要在 main.js 中引入 iconfont.js
</script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
```
**⚠️ 注意：** 小程序对 SVG 支持有限，推荐使用方式一！
---
## 🎯 最佳实践建议
### 1. 使用 Font Class 方式（方式一）
**优点：**
- ✅ 兼容性好，支持所有平台
- ✅ 可以自定义颜色和大小
- ✅ 语义化强，易于维护
- ✅ 体积小，加载快
**缺点：**
- ❌ 只支持单色图标
### 2. 创建图标组件库
```
components/
├── IconfontIcon/
│ └── IconfontIcon.vue # 通用图标组件
```
### 3. 统一管理图标名称
创建 `config/icons.js`：
```javascript
// 图标配置
export const ICONS = {
HOME: 'home',
USER: 'user',
SEARCH: 'search',
LOCATION: 'location',
PHONE: 'phone',
// ... 更多图标
}
```
使用：
```vue
<script setup>
import { ICONS } from '@/config/icons'
</script>
<template>
<IconfontIcon :name="ICONS.HOME" />
</template>
```
---
## 🔧 常见问题
### Q1: 小程序中图标不显示？
**解决方案：**
- 确保使用本地字体文件，不要使用在线链接
- 检查 CSS 中的字体路径是否正确
- 确保字体文件已正确复制到 `static/iconfont/` 目录
### Q2: 图标显示为方框？
**解决方案：**
- 检查字体文件是否完整
- 检查 `@font-face` 的 `font-family` 名称是否一致
- 清除缓存重新编译
### Q3: 如何更新图标库？
1. 在阿里图标库添加新图标到项目
2. 重新下载至本地
3. 替换 `static/iconfont/` 下的所有文件
4. 清除缓存，重新编译
### Q4: H5 和小程序路径不一致？
**解决方案：**
使用条件编译：
```css
@font-face {
font-family: "iconfont";
/* #ifdef H5 */
src: url('/static/iconfont/iconfont.woff2') format('woff2');
/* #endif */
/* #ifdef MP-WEIXIN */
src: url('./iconfont.ttf') format('truetype');
/* #endif */
}
```
---
## 📝 示例代码
### 完整示例：登录按钮
```vue
<template>
<button class="login-btn">
<text class="iconfont icon-phone"></text>
<text>手机号登录</text>
</button>
</template>
<style scoped>
.login-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 40rpx;
background: #13C57C;
border-radius: 12rpx;
color: #fff;
}
.iconfont {
font-size: 32rpx;
margin-right: 12rpx;
}
</style>
```
---
## 🎨 推荐使用的图标
### 常用图标
- `icon-home` - 首页
- `icon-user` - 用户
- `icon-search` - 搜索
- `icon-location` - 位置
- `icon-phone` - 电话
- `icon-message` - 消息
- `icon-setting` - 设置
- `icon-star` - 收藏
- `icon-share` - 分享
- `icon-close` - 关闭
---
## 📚 相关资源
- [阿里图标库官网](https://www.iconfont.cn/)
- [uni-app 字体图标文档](https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87)
- [CSS @font-face](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face)
---
## ✅ 检查清单
- [ ] 已下载图标文件到 `static/iconfont/` 目录
- [ ] 已修改 CSS 中的字体文件路径
- [ ] 已在 App.vue 中引入 iconfont.css
- [ ] 已测试图标显示正常
- [ ] 已封装图标组件（可选）
- [ ] 已统一管理图标名称（可选）

407
docs/阿里图标库快速开始.md Normal file
View File

@@ -0,0 +1,407 @@
# 阿里图标库快速开始 🚀
## 一、5分钟快速上手
### Step 1: 下载图标文件（2分钟）
1. 访问 https://www.iconfont.cn/
2. 登录后搜索图标，点击"添加入库"
3. 购物车 → 添加至项目（没有项目先创建）
4. 我的项目 → 下载至本地
### Step 2: 放置文件（1分钟）
解压下载的文件，将以下4个文件复制到 `static/iconfont/` 目录：
```
✅ iconfont.css
✅ iconfont.ttf
✅ iconfont.woff
✅ iconfont.woff2
```
### Step 3: 修改CSS路径（1分钟）
打开 `static/iconfont/iconfont.css`，将字体路径修改为相对路径：
```css
@font-face {
font-family: "iconfont";
src: url('./iconfont.woff2?t=xxx') format('woff2'),
url('./iconfont.woff?t=xxx') format('woff'),
url('./iconfont.ttf?t=xxx') format('truetype');
}
```
### Step 4: 全局引入（1分钟）
在 `App.vue` 的 `<style>` 标签中添加：
```vue
<style>
/* 引入阿里图标库 */
@import url("/static/iconfont/iconfont.css");
</style>
```
### Step 5: 开始使用 ✨
```vue
<template>
<!-- 直接使用 -->
<text class="iconfont icon-home"></text>
<!-- 或使用组件 -->
<IconfontIcon name="home" :size="48" color="#13C57C" />
</template>
```
---
## 二、推荐使用方式
### 方式 A：使用封装的组件（最推荐）👍
```vue
<template>
<IconfontIcon name="phone" :size="40" color="#13C57C" />
</template>
<script setup>
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
</script>
```
**优点：**
- ✅ 统一管理，易于维护
- ✅ 支持动态修改大小和颜色
- ✅ 语义清晰
- ✅ 支持点击事件
### 方式 B：使用配置常量（推荐）
```vue
<template>
<IconfontIcon
:name="ICONS.HOME"
:size="ICON_SIZES.LARGE"
:color="ICON_COLORS.PRIMARY"
/>
</template>
<script setup>
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
import { ICONS, ICON_SIZES, ICON_COLORS } from '@/config/icons'
</script>
```
**优点：**
- ✅ 统一图标名称
- ✅ 避免拼写错误
- ✅ IDE 自动补全
- ✅ 便于重构
### 方式 C：直接使用类名
```vue
<template>
<text class="iconfont icon-home" style="font-size: 32rpx; color: #333;"></text>
</template>
```
---
## 三、常用场景示例
### 场景1：导航栏图标
```vue
<template>
<view class="navbar">
<IconfontIcon name="arrow-left" :size="40" @click="goBack" />
<text class="title">页面标题</text>
<IconfontIcon name="share" :size="36" @click="share" />
</view>
</template>
<script setup>
const goBack = () => {
uni.navigateBack()
}
const share = () => {
// 分享逻辑
}
</script>
```
### 场景2：按钮图标
```vue
<template>
<button class="primary-btn">
<IconfontIcon name="phone" :size="32" color="#FFFFFF" />
<text>手机号登录</text>
</button>
</template>
<style>
.primary-btn {
display: flex;
align-items: center;
gap: 12rpx;
}
</style>
```
### 场景3：列表项图标
```vue
<template>
<view class="list-item">
<IconfontIcon name="location" :size="36" color="#13C57C" />
<text class="text">工作地点</text>
<IconfontIcon name="arrow-right" :size="28" color="#999" />
</view>
</template>
```
### 场景4：状态图标
```vue
<template>
<view class="status-box">
<IconfontIcon
:name="status.icon"
:size="64"
:color="status.color"
/>
<text>{{ status.text }}</text>
</view>
</template>
<script setup>
import { computed } from 'vue'
const orderStatus = ref('success')
const status = computed(() => {
const map = {
success: { icon: 'success', color: '#13C57C', text: '提交成功' },
error: { icon: 'error', color: '#F44336', text: '提交失败' },
loading: { icon: 'loading', color: '#256BFA', text: '处理中...' }
}
return map[orderStatus.value]
})
</script>
```
---
## 四、组件API说明
### IconfontIcon 组件
**Props:**
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| name | String | - | 图标名称（必填），如：'home' 或 'icon-home' |
| size | String/Number | 32 | 图标大小，单位rpx |
| color | String | - | 图标颜色，支持十六进制、rgb等 |
| bold | Boolean | false | 是否加粗 |
**Events:**
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| click | 点击图标时触发 | event |
**使用示例:**
```vue
<IconfontIcon
name="home"
:size="48"
color="#13C57C"
:bold="true"
@click="handleClick"
/>
```
---
## 五、配置说明
### 图标名称配置（config/icons.js）
```javascript
export const ICONS = {
HOME: 'home',
USER: 'user',
SEARCH: 'search',
// ... 更多图标
}
```
### 尺寸预设
```javascript
export const ICON_SIZES = {
MINI: 24, // 24rpx
SMALL: 28, // 28rpx
NORMAL: 32, // 32rpx（默认）
LARGE: 40, // 40rpx
XLARGE: 48, // 48rpx
}
```
### 颜色预设
```javascript
export const ICON_COLORS = {
PRIMARY: '#13C57C', // 主色调
SECONDARY: '#256BFA', // 次要色
SUCCESS: '#13C57C', // 成功
WARNING: '#FF9800', // 警告
DANGER: '#F44336', // 危险
TEXT: '#333333', // 文本色
}
```
---
## 六、常见问题
### Q1: 图标不显示？
**检查清单：**
- [ ] 文件是否已复制到 `static/iconfont/` 目录
- [ ] CSS路径是否正确修改
- [ ] 是否已在 App.vue 中引入
- [ ] 图标类名是否正确（如：`icon-home`）
- [ ] 清除缓存并重新编译
### Q2: 如何查看可用的图标？
1. 打开下载包中的 `demo_index.html`
2. 或查看 `iconfont.css` 中的类名
3. 类名格式通常为 `.icon-xxx:before`
### Q3: 如何更新图标？
1. 在阿里图标库添加新图标到项目
2. 重新下载至本地
3. 替换 `static/iconfont/` 下的所有文件
4. 清除缓存，重新编译
### Q4: 小程序能用在线链接吗？
❌ 不能！微信小程序必须使用本地字体文件。
---
## 七、最佳实践
### ✅ 推荐做法
1. **统一管理图标名称**
```javascript
// 使用配置文件
import { ICONS } from '@/config/icons'
```
2. **使用封装的组件**
```vue
<IconfontIcon name="home" />
```
3. **预设常用尺寸和颜色**
```javascript
import { ICON_SIZES, ICON_COLORS } from '@/config/icons'
```
4. **语义化命名**
```javascript
const ICONS = {
HOME: 'home', // ✅ 语义清晰
USER_CENTER: 'user', // ✅ 明确用途
}
```
### ❌ 不推荐做法
1. **硬编码图标名称**
```vue
<text class="iconfont icon-home"></text> <!-- ❌ 不推荐 -->
```
2. **使用在线链接（小程序）**
```css
@import url("//at.alicdn.com/xxx.css"); /* ❌ 小程序不支持 */
```
3. **直接使用 Unicode**
```vue
<text class="iconfont">&#xe600;</text> <!-- ❌ 不直观 -->
```
---
## 八、测试页面
已为你创建了测试页面，可以查看各种使用方式：
**路径:** `pages/demo/iconfont-demo.vue`
在 `pages.json` 中添加页面配置即可访问：
```json
{
"path": "pages/demo/iconfont-demo",
"style": {
"navigationBarTitleText": "图标示例"
}
}
```
---
## 九、相关文件
```
项目结构：
├── components/
│ └── IconfontIcon/
│ └── IconfontIcon.vue # 图标组件
├── config/
│ └── icons.js # 图标配置
├── static/
│ └── iconfont/
│ ├── iconfont.css # 样式文件
│ ├── iconfont.ttf # 字体文件
│ ├── iconfont.woff # 字体文件
│ ├── iconfont.woff2 # 字体文件
│ └── README.md # 说明文档
├── pages/
│ └── demo/
│ └── iconfont-demo.vue # 测试页面
└── docs/
├── 阿里图标库引入指南.md # 详细文档
└── 阿里图标库快速开始.md # 本文档
```
---
## 十、总结
✅ **记住这三步：**
1. **下载** - 从阿里图标库下载文件
2. **放置** - 复制到 `static/iconfont/` 目录
3. **引入** - 在 `App.vue` 中引入 CSS
🎉 **就是这么简单！**
如有问题，请参考详细文档：`docs/阿里图标库引入指南.md`

87
docs/首页滚动优化说明.md Normal file
View File

@@ -0,0 +1,87 @@
# 首页滚动显示隐藏优化说明
## 修复的问题
### 1. **逻辑冲突问题**
- **原问题**：同时存在触摸手势（`handleTouchStart/Move/End`）和滚动事件两套控制逻辑
- **影响**：两套逻辑相互干扰，导致显示隐藏行为不稳定
- **解决方案**：移除触摸手势处理，统一使用滚动事件控制
### 2. **小程序兼容性问题**
- **原问题**：使用了 `document.querySelector('.falls-scroll')` 操作 DOM
- **影响**：在微信小程序中无法正常工作
- **解决方案**：完全通过响应式数据和滚动事件处理，避免直接操作 DOM
### 3. **不合理的显示逻辑**
- **原问题**：使用 `isManuallyHidden` 标记，只有手动隐藏后才能通过滚动显示
- **影响**：用户体验差，需要特定操作才能恢复显示
- **解决方案**：简化逻辑，滚动到顶部自动显示，向下滚动超过阈值自动隐藏
### 4. **性能问题**
- **原问题**：使用 `setTimeout` 进行节流，清理不完善
- **影响**：可能导致内存泄漏和性能下降
- **解决方案**：改用 `requestAnimationFrame`，添加 `ticking` 标志，在组件卸载时清理
## 优化内容
### 1. **滚动阈值优化**
```javascript
const HIDE_THRESHOLD = 150; // 隐藏顶部区域的滚动阈值
const SHOW_THRESHOLD = 10; // 显示顶部区域的滚动阈值（接近顶部）
const STICKY_THRESHOLD = 100; // 筛选区域吸顶的滚动阈值
```
### 2. **滚动方向判断优化**
- 添加最小位移判断（2px），避免微小抖动导致的误判
- 使用 `delta` 计算滚动方向，更加准确
### 3. **动画效果优化**
- 使用 Material Design 的缓动曲线 `cubic-bezier(0.4, 0.0, 0.2, 1)`
- 优化过渡时间，使动画更加流畅自然
- 添加 `pointer-events: none` 避免隐藏时的交互问题
- 使用硬件加速（`transform: translateZ(0)`）提升性能
### 4. **吸顶效果优化**
- 优化占位符高度，避免内容跳动
- 改进阴影效果，视觉层次更加清晰
- H5 和小程序分别处理，确保跨平台一致性
### 5. **资源清理**
- 在 `onUnmounted` 生命周期中清理 `requestAnimationFrame`
- 防止内存泄漏
## 使用效果
### 滚动行为
1. **向下滚动超过 150px**：顶部区域（搜索框、卡片、服务网格）自动隐藏
2. **滚动到顶部（小于 10px）**：顶部区域自动显示
3. **滚动超过 100px**：筛选区域吸顶显示
### 动画效果
- 隐藏/显示过渡时间：350ms
- 透明度过渡：300ms
- 平滑的向上滑动动画
### 性能表现
- 使用 `requestAnimationFrame` 确保 60fps 流畅度
- 防抖处理避免过度渲染
- 硬件加速提升动画性能
## 兼容性
- ✅ 微信小程序
- ✅ H5
- ✅ App (理论支持，需实际测试)
## 注意事项
1. 如需调整滚动阈值，修改 `HIDE_THRESHOLD`、`SHOW_THRESHOLD`、`STICKY_THRESHOLD` 三个常量
2. 如需调整动画速度，修改 `.hidden-animation` 中的 `transition` 时间
3. 占位符高度需要与 `.nav-filter` 的实际高度保持一致
## 后续优化建议
1. 可以考虑添加滚动速度检测，快速滚动时立即隐藏
2. 可以添加用户偏好设置，允许关闭自动隐藏功能
3. 可以添加触底提示，优化加载更多的体验