【Vue项目】四、去哪儿网APP——详情页面开发

最新推荐文章于 2023-05-09 20:12:11 发布

drinmy

最新推荐文章于 2023-05-09 20:12:11 发布

阅读量797

点赞数

分类专栏： Vue项目文章标签：前端 vue.js

本文链接：https://blog.csdn.net/Msy_yyy/article/details/107251687

版权

本文详细介绍了使用Vue.js开发去哪儿网APP详情页面的过程，包括解决router-link字体颜色问题，动态路由，Banner渐变背景，画廊组件的轮播效果，Header组件的显示与动画，页面滑动事件处理，递归组件应用，动态数据获取，页面缓存策略，以及过渡动画的实现等关键点。

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

使用router-link总会因为这个是一个a标签而使字体变颜色。解决方法是：将router-link当做<li>标签来用：

<router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/' + item.id">

{
   
    // 动态路由
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }

后面的id对应着相应的景点详情id。

background-image: linear-gradient(top, rgba(0, 0, 0, 0) ,rgba(0, 0, 0, 0.8))

将该画廊组件设置为公用组件，因为很多页面将要用到。

/* 撑出一个正方形 */
      height: 0
      width: 100%
      padding-bottom: 100%

width:100%

使用vue-awesome-swiper实现图片的轮播效果
借鉴Swiper的API文档Swiper文档
然后，设置分页器类型为：‘fraction’ 分式。
设置v-show来决定画廊组件是否出现，并且绑定图片的点击事件。
编写完毕，出现了轮播图滚动的问题，这是由于：最开始common-gallery处于隐藏的状态，展示出来时，swiper计算宽度有些问题，导致无法正常滚动。
解决方法：
（1）加入Observer：启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false，不开启，可以使用update()方法更新。
（2）加入observeParents：将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。

swiper的配置代码为：

swiperOption: {
   
        pagination: '.swiper-pagination'