vue项目实战（三）- 旅游网站详情页面开发

最新推荐文章于 2024-07-26 15:02:34 发布

i小默

最新推荐文章于 2024-07-26 15:02:34 发布

阅读量1.3k

点赞数 3

分类专栏：前端文章标签： vue html javascript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_36142158/article/details/110089676

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文探讨了详情页banner的设计实现，通过动态路由展示景点详情；公共画廊组件的拆分与Swiper的运用；以及header的渐隐渐现效果。同时介绍了组件的生命周期管理和递归组件的使用，涉及前端UI和交互设计。

摘要由CSDN通过智能技术生成

一、详情页banner

添加动态路由：

{
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
  }

详情页首图：

<template>
  <div class="banner">
    <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1809/10/10d6568ad3ad4bb5a3.img.jpg_600x330_02eafe8e.jpg">
    <div class="banner-info">
      <div class="banner-title">
        亚龙湾热带天堂森林公园(AAAA景区)
      </div>
      <div class="banner-number">
        <span class="iconfont banner-icon">&#xe650;</span>
        41
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeatilBanner'
}
</script>

<style lang="stylus" scoped>
  .banner
    position: relative
    overflow: hidden
    height: 0
    padding-bottom: 55%
    .banner-img
      width: 100%
    .banner-info
      display: flex
      position: absolute
      left: 0
      right: 0
      bottom: 0
      line-height: .6rem
      color: #FFFFFF
      background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
      .banner-title
        flex: 1
        font-size: .32rem
        padding: 0 .2rem
      .banner-number
        height: .32rem
        line-height: .32rem
        margin-top: .14rem
        padding: 0 .4rem
        border-radius: .2rem
        background: rgba(0, 0, 0, .8)
        font-size: .24rem
        .banner-icon
          font-size: .24rem
</style>

效果图：

二、公共画廊组件拆分

新建一个公用组件，gallary.vue:

<template>
  <div class="container" @click="handleGallaryClick">
    <div class="wrapper">
      <swiper :options="swiperOptions">
        <swiper-slide v-for="(item, index) in imgs" :key="index">
          <img class="gallary-img" :src="item" />
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonGallary',
  props: {
    imgs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observeParents: true,
        observer: true
      }
    }
  },
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .container >>> .swiper-container
    overflow: inherit
  .container
    display: flex
    flex-direction: column
    justify-content: center
    z-index: 99
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: #000000
    .wrapper
      width: 100%
      height: 0
      padding-bottom: 50%
      .gallary-img
        width: 100%
      .swiper-pagination
        color: #FFFFFF
        bottom: -1rem
</style>

三、实现header渐隐渐现

<template>
  <div>
    <router-link
      tag="div"
      to="/"
      class="header-abs"
      v-show="showAbs"
    >
      <div class="iconfont header-abs-back">&#xe624;</div>
    </router-link>
    <div
      class="header-fixed"
      v-show="!showAbs"
      :style="opacityStyle"
    >
      <router-link to="/">
        <div class="iconfont header-fixed-back">&#xe624;</div>
      </router-link>
       景点详情
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = {opacity}
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header-abs
    position: absolute
    left: .2rem
    top: .2rem
    width: .8rem
    height: .8rem
    line-height: .8rem
    border-radius: .4rem
    text-align: center
    background: rgba(0, 0, 0, .8)
    .header-abs-back
      color: #FFFFFF
      font-size: .4rem
  .header-fixed
    position: fixed
    top: 0
    left: 0
    right: 0
    height: $headerHeight
    line-height: $headerHeight
    text-align: center
    color: #FFFFFF
    background: $bgColor
    font-size: .32rem
    .header-fixed-back
      position: absolute
      top: 0
      left: 0
      width: .64rem
      text-align: center
      font-size: .4rem
      color: #fff
</style>

四、全局事件解绑

activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  // 页面即将被隐藏或者被替换成新的页面时，执行该方法
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }

五、使用递归组件

数据：

list: [{
        title: '成人票',
        children: [{
          title: '成人三馆联票',
          children: [{
            title: '成人三馆联票-某一连锁店销售'
          }]
        }, {
          title: '成人五馆联票'
        }]
      }, {
        title: '学生票'
      }, {
        title: '儿童票'
      }, {
        title: '特惠票'
      }]

递归:

<div
      class="item"
      v-for="(item, index) of list"
      :key="index"
    >
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{item.title}}
      </div>
      <div class="item-children" v-if="item.children">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>