Vue 高仿去哪儿网--【十三:详情页】

点击进入详情页,之前仅仅考虑到只点击“查看详情”按钮进入详情页,然而忽略了用户的交互友好问题,应该点击故宫这一列表的任何区域都可以进入详情页。所以应该在li上加router-link

为了防止页面的抖动,当涉及这些图片加载问题时 ,要记得给图片外层的容器在上【总会忘记】

画廊,可以轮播,底部还有数字,因为考虑到后期可能会有很多这样的轮播,所以讲其设置为公用组件

vue-awesome-swiper的使用以及API整理

https://segmentfault.com/a/1190000014609379

需要将其放到下面,设置bottom: -1rem,随后不见的原因是其父元素设置了overflow: hidden,需要将其删除

 

依旧没显示原因是这个swiper插件自带了overflow: hidden,需要用到样式穿透使其继承父元素的属性【正常情况下想不到】

逻辑部分:反思

初始时“1”是为了让展开图隐藏,给他定义一个v-show指令,在data中定义初始值showBannershow:false,这样就可以做到隐藏,显示则需要点击Banner 图,所以要给Banner添加一个click事件,让showBannershow:true.

猜你喜欢

转载自blog.csdn.net/weixin_41964994/article/details/81384342