【Vue3.0移动端项目--旅游网】-- 详情页的标签定位滚动

多一些不为什么的坚持🤳

贤蛋 🥚大眼萌 ，一名很普通但不想普通的程序媛🙊

📝本文章收录于专栏：Vue3.0移动端项目-旅游网

第一篇：【Vue3.0移动端项目–旅游网】–项目初始化搭建

第二篇：【Vue3.0移动端项目–旅游网】–配置tabBar &首页搭建

第三篇：【Vue3.0移动端项目–旅游网】-- 城市页面搭建

第四篇：【Vue3.0移动端项目–旅游网】-- 首页日期和热门推荐处理

第五篇：【Vue3.0移动端项目–旅游网】-- 首页分类和热门精选展示

第六篇：【Vue3.0移动端项目–旅游网】-- Loading加载和导航栏bug调试

第七篇：【Vue3.0移动端项目–旅游网】-- 房屋详情页创建以及房屋详情图片展示

第八篇：【Vue3.0移动端项目–旅游网】-- 房屋信息和房屋设施

第九篇：【Vue3.0移动端项目–旅游网】-- 房东评价、热门评论、预定须知模块

第十篇：【Vue3.0移动端项目–旅游网】-- 集成百度地图以及底部模块

🧲 新建 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)
})

1. 监听整个大的detial div盒子的滚动，如果滚动距离大于等于300就显示标签栏
2. 点击标签栏跳到对应的位置上

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