新建 detail 分支
通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。
1.创建新分支并且跳转到改分支上2
git checkout -b detail01
2.查看分支
git branch
创建房屋详情页和监听房屋点击
1. 监听房屋点击
2. 创建房屋详情页
3. 跳转到具体ID的房屋详情页
- 点击跳转房屋页面
- 设置动态路由
- 编写网络请求函数
- 发送网络请求获取数据
房屋详情导航栏和返回上一层
1. 引入 Vant 组件的导航栏
2. 监听点击返回上一次
图片展示轮播图
1. 引入 Vant 轮播图组件
- 父组件将房屋信息传递给轮播图组件
- 轮播图组件引入 vant 轮播图样式
- 设置自己需要的轮播图图片
2. 设置自定义指示器
看官方文档中有给我们提供自定义指示器的插槽，我们自己定义数据。
1.处理数据
完整代码：
//detail_01-swipe.vue <template> <div class="swipe"> <van-swipe class="swipe-list" :autoplay="3000" indicator-color="white" > <template v-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"> <template v-for="(value,key) in swipeGroup" :key="key" > <span class="item" :class="{ active: swipeData[active]?.enumPictureCategory == key }" > <span class="text">{{getName(value[0].title)}}</span> <span class="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 = /【(.*?)】/i const 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）
1.添加到暂存区
git add .
2.添加到仓库
git commit -m "detail01分支"
3.推送代码
git push -u origin detail01
4.将本地的 loading 分支 合并到主分支上master （注意要先切换在主分支上)
git checkout mater
5.分支合并
git merge detail01
6.更新远程仓库 detail01 分支
git push
7.删除tabbar分支
git branch -d detail01
补充：
网络数据请求地址数据
项目github 地址：https://github.com/fdfd-0313/cz-trip.git
