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

多一些不为什么的坚持🤳

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

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

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

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

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

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

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

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

🧲 新建 detail 分支

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

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

git checkout -b detail01

2. 查看分支

git branch

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

1. 监听房屋点击

2. 创建房屋详情页

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

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

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

1. 引入 Vant 组件的导航栏

2. 监听点击返回上一次

🎯 图片展示轮播图

1. 引入 Vant 轮播图组件

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

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