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

2022-10-12 157

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【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>

微信图片_20221012152921.png

2. 监听滚动

这里需要用到我们重构之前封装过的 useScroll.js 工具函数。使其既能监听 window的滚动也可以监听元素的滚动。

在detail页面中，是一整个大的div 包裹很多个小的div在滚动

微信图片_20221012153013.png

微信图片_20221012153038.png

3. 监听标签点击，点击之后滚动到指定位置

思路：准备一个对象，key 是每一个组件的name，value是每一个组件的根元素

微信图片_20221012153112.png

// 创建标签对象
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)
})