vue项目实战旅游网站详情页面开发
来源：www.xysxzl.com时间：2021-02-20 10:10旅游内容页
一、详情页banner
添加动态路由：
.jpg?id=14919)
component: Detail。
}
详情页首图：
。
。
效果图：
image.png
二、公共画廊组件拆分
新建一个公用组件,gallary.vue:。
。
。
。。
三、实现header渐隐渐现
。
tag='div' to='/' class='header-abs'。 v-show='showAbs'。 >
。
class='header-fixed'。 v-show='!showAbs'。 :style='opacityStyle'。 >
。
景点详情
。
四、全局事件解绑
activated () {。
window.addEventListener('scroll', this.handleScroll)。
},
/页面即将被隐藏或者被替换成新的页面时,执行该方法。
deactivated () {。
window.removeEventListener('scroll', this.handleScroll)。
}
五、使用递归组件
数据：
list: [{
title: '成人票',。
children: [{。
title: '成人三馆联票',。
children: [{。
title: '成人三馆联票-某一连锁店销售'。
}]
}, {
title: '成人五馆联票'。
}]
}, {
title: '学生票'。
}, {
title: '儿童票'。
}, {
title: '特惠票'。
}]
递归:
class='item'。 v-for='(item, index) of list'。 :key='index'。 > 。 {{item.title}}。
.jpg?id=7516)
.jpg?id=32696)
.jpg?id=88687)
.jpg?id=12806)
.jpg?id=5422)
.jpg?id=52925)
.jpg?id=24839)
.jpg?id=73592)
.jpg?id=78847)
.jpg?id=14065)
.jpg?id=58551)
.jpg?id=61415)
.jpg?id=65559)
.jpg?id=53009)
.jpg?id=56819)
.jpg?id=97595)
.jpg?id=87749)
.jpg?id=21700)
.jpg?id=12451)
.jpg?id=89638)
精品行程推荐
-
北京市卫健委 提醒，今日是国庆节假期最后一天，面临进返京高峰，出京旅行
-
“秋天的日子是半透明的 涂在金色的土地和田野上” 如果有一个季节，能让整
-
最美的风景在路上，最美的路上有风景。一条条公路串联湖北的名山大川、多彩
-
从靠山水到卖场景 从卖特产到拼创意 乡村旅游越来越好玩 “采摘”“收割”“
-
老君山两日自由行攻略，不抱团，自己做大巴或开车去攻略。有爬山和做索道两
-
旅游出行方式的简单比较 出游 方式 项目 比较 特点 优点 局限性 适合人群 适合
-
一年四季，寒来暑往，春夏秋冬，风景各有各的美。而自驾旅游的魅力，就在于
-
从北京海淀出发，自驾140公里左右，就可以看到另外一番天地。 这里是高山草
-
我们都是时间的旅行者， 为了寻找生命中的光。 终其一生，行走在漫长的旅途
-
原标题：三月赏花游 户外踏青走起 文、图/广州日报全媒体记者罗磊 通讯员柳