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

2022-10-12 251

版权

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

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

新建 detail 分支

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

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

git checkout -b detail01

2.查看分支

git branch

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

1. 监听房屋点击

微信图片_20221012143521.png 微信图片_20221012143527.png

2. 创建房屋详情页

微信图片_20221012143601.png

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

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

微信图片_20221012143658.png 微信图片_20221012143702.png 微信图片_20221012143710.png 微信图片_20221012143714.png

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

1. 引入 Vant 组件的导航栏

微信图片_20221012143750.png

2. 监听点击返回上一次

微信图片_20221012143810.png

图片展示轮播图

1. 引入 Vant 轮播图组件

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

微信图片_20221012143857.png 微信图片_20221012143901.png 微信图片_20221012143905.png

2. 设置自定义指示器

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

1.处理数据

微信图片_20221012143959.png 微信图片_20221012144010.png

完整代码：

//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

微信图片_20221012144331.png

补充：

网络数据请求地址数据

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