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

多一些不为什么的坚持🤳

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

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

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

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

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

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

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

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

房屋详情页创建以及房屋详情图片展示

🧲 新建 detail 分支🏓 创建房屋详情页和监听房屋点击1. 监听房屋点击2. 创建房屋详情页3. 跳转到具体ID的房屋详情页 🚀 房屋详情导航栏和返回上一层1. 引入 Vant 组件的导航栏2. 监听点击返回上一次 🎯 图片展示轮播图1. 引入 Vant 轮播图组件2. 设置自定义指示器 🧬 Git 管理和代码托管（github）

🧲 新建 detail 分支

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

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

git checkout -b detail01

查看分支

git branch

🏓 创建房屋详情页和监听房屋点击

1. 监听房屋点击

2. 创建房屋详情页

3. 跳转到具体ID的房屋详情页

点击跳转房屋页面设置动态路由编写网络请求函数发送网络请求获取数据

🚀 房屋详情导航栏和返回上一层

1. 引入 Vant 组件的导航栏

2. 监听点击返回上一次

🎯 图片展示轮播图

1. 引入 Vant 轮播图组件

父组件将房屋信息传递给轮播图组件轮播图组件引入 vant 轮播图样式设置自己需要的轮播图图片

2. 设置自定义指示器

看官方文档中有给我们提供自定义指示器的插槽，我们自己定义数据。

处理数据

完整代码：

//detail_01-swipe.vue<template><div class="swipe"><van-swipeclass="swipe-list":autoplay="3000"indicator-color="white"><templatev-for="(item, index) in swipeData":key="index"><van-swipe-item class="item"><img :src="item.url"></van-swipe-item></template><template #indicator="{active}"><div class="indicator"><templatev-for="(value,key) in swipeGroup":key="key"><spanclass="item":class="{ active: swipeData[active]?.enumPictureCategory == key }"><span class="text">{{getName(value[0].title)}}</span><spanclass="count"v-if="swipeData[active]?.enumPictureCategory == key">{{getCategoryIndex(swipeData[active]) }}/{{value.length }}</span></span></template></div></template></van-swipe></div></template><script setup>const props = defineProps({swipeData: {type: Array,default: () => {}}})const swipeGroup = {}// 转换数据for (const item of props.swipeData) {let valueArray = swipeGroup[item.enumPictureCategory]if (!valueArray) {valueArray = []swipeGroup[item.enumPictureCategory] = valueArray}valueArray.push(item)}// 定义转换数据的方法const nameReg = /【(.*?)】/iconst getName = (name) => {// return name.replace("：", "").replace("】", "").replace("【", "")const results = nameReg.exec(name)return results[1]}const getCategoryIndex = (item) => {const valueArray = swipeGroup[item.enumPictureCategory]return valueArray.findIndex(data => data === item) + 1}</script><style lang="less" scoped>.swipe {.swipe-list {.item {img {width: 100%;}}}.indicator {position: absolute;right: 5px;bottom: 5px;display: flex;padding: 2px 5px;font-size: 12px;color: #fff;background: rgba(0, 0, 0, 0.8);.item {margin: 0 3px;&.active {padding: 0 3px;border-radius: 5px;background-color: #fff;color: #333;}}}}</style>

效果：

🧬 Git 管理和代码托管（github）

添加到暂存区

git add .

添加到仓库

git commit -m "detail01分支"

推送代码

git push -u origin detail01

将本地的 loading 分支 合并到主分支上master （注意要先切换在主分支上）

git checkout mater

分支合并

git merge detail01

更新远程仓库 detail01 分支

git push

删除tabbar分支

git branch -d detail01

补充：

网络数据请求地址数据

项目github 地址：/fdfd-0313/cz-trip.git