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

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

新建 detail 分支


通过 Git 管理项目,养成良好的开发习惯,可以创建分支。最后开发完可以合并分支。

1.创建新分支并且跳转到改分支上

git checkout -b detail 

2.查看分支

git branch

image.png


标签滚动定位


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)
})
  1. 监听整个大的detial div盒子的滚动,如果滚动距离大于等于300就显示标签栏
  2. 点击标签栏跳到对应的位置上

微信图片_20221012153225.png

4. 滚动到一定位置显示出标签


这里涉及一个算法,有点类似根据歌曲的播放时间显示对应的歌词

微信图片_20221012153307.png

完整效果:

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

目录
打赏
0
0
0
0
22
分享
相关文章
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
204 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
47 0
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
248 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
508 2
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
177 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
272 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
207 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
214 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
318 4
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
284 12
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等