看起来很复杂,实际上只是用到了v-show,v-show可以控制组件显示与否。其实项目不是最终目的,而是通过项目去掌握知识达到融汇贯通的效果。所以不要囫囵吞枣的将项目做完,而是时时反思。好了废话不多讲,先看效果图
![5489379-ff97c762a778200a.png](https://i-blog.csdnimg.cn/blog_migrate/12793f57570121e5e7c7305ce5cc0968.png)
可以发现图片是居中显示的,其他地方都是黑色背景,并且这还是一个轮播效果。emmmmm ,好复杂
解决办法
第一步
首先来结解决这个css的问题,如何将整个北京变为黑色?其实在之前做search功能就用到了。当然了,还有这个图片是居中显示的,这里使用了flex,其实很多地方可以用到flex,反正能用flex就用。这里总结一下,直接看代码吧
<style lang="stylus" scoped>
.container
display flex
flex-flow column nowrap
justify-content center
position fixed
left 0
top 0
bottom 0
right 0
background-color black
.wrapper
overflow hidden
height 0
padding-bottom 56%
background-color white
.img
width 100%
</style>
第二步
可以发现这个轮播组件其实用的挺多的,并且在一个页面就显示了两个页面效果,这也可以拆分,以后再说
第三步
要想实现点击图片就显示画廊效果,就在图片上绑定事件,它可以改变某个值,然后在画廊上使用v-show,它使用相同的某个值去控制v-show显示。显示解决了,那么隐藏呢?这时在画廊的组件上也绑定一个事件,同样的可以改变某个值,然后去控制这个v-show的隐藏