新建 detail 分支
通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。
1.创建新分支并且跳转到改分支上
git checkout -b detail
2.查看分支
git branch
标签滚动定位
1. 创建一个 tabcontrol全局组件
<template> <div class="tab-control"> <template v-for="(item, index) in titles" :key="item" > <div class="tab-control-item" :class="{ active: index === currentIndex }" @click="itemClick(index)" > <span>{{ item }}</span> </div> </template> </div> </template> <script setup> import { ref } from "@vue/reactivity" const props = defineProps({ titles: { type: Array, default: () => [] } }) const currentIndex = ref(0) const emits = defineEmits(["tabItemClick"]) const itemClick = (index) => { currentIndex.value = index emits("tabItemClick", index) } const setCurrentIndex = (index) => { currentIndex.value = index } </script> <style lang="less" scoped> .tab-control { display: flex; height: 44px; line-height: 44px; text-align: center; background-color: #fff; } .tab-control-item { flex: 1; } .tab-control-item.active { color: var(--primary-color); font-weight: 700; } .tab-control-item.active span { border-bottom: 3px solid var(--primary-color); padding: 8px; } </style>
2. 监听滚动
这里需要用到我们重构之前封装过的 useScroll.js 工具函数。使其既能监听 window的滚动也可以监听元素的滚动。
在detail页面中，是一整个大的div 包裹很多个小的div在滚动
3. 监听标签点击，点击之后滚动到指定位置
思路：准备一个对象，key 是每一个组件的name，value是每一个组件的根元素
// 创建标签对象 const sectionEls = ref({}) const getSectionRef = (value) => { if (!value) return const name = value.$el.getAttribute("name") sectionEls.value[name] = value.$el } const names = computed(() => { return Object.keys(sectionEls.value) })
- 监听整个大的detial div盒子的滚动，如果滚动距离大于等于300就显示标签栏
- 点击标签栏跳到对应的位置上
4. 滚动到一定位置显示出标签
这里涉及一个算法，有点类似根据歌曲的播放时间显示对应的歌词
完整效果：
Git 管理和代码托管（github）
1.添加到暂存区
git add .
2.添加到仓库
git commit -m "detail分支"
3.推送代码
git push -u origin detail
4.将本地的 detail分支 合并到主分支上master （注意要先切换在主分支上）
git checkout mater
5.分支合并
git merge detail
6.更新远程仓库 detail 分支
git push
7.删除 detail 分支
git branch -d detail
补充：
网络数据请求地址数据
项目github 地址：https://github.com/fdfd-0313/cz-trip.git
