详情页动态路由及banner布局

1. 创建分支detail-banner并拉到线下。

2. 我们的要求是希望点击景点的时候导入到详情页：
详情页动态路由及banner布局
打开首页中的Recommend组件，我们给li标签外层包裹一层router-link标签：

刷新，发现router-link标签会改变文字的颜色：

我们可以以换一种写法，直接把li标签换成router-link，加上tag之后就会渲染成li标签而不是一个a标签了，我们做一个动态的绑定：
详情页动态路由及banner布局
实现了一个参数的传递，通过URL在进入路由的时候，将参数带到这个路径下：

3. 动态路由
而现在我们没有这样的一个路由配置，所以来添加一个路由，在router文件夹下的index.js加一项，动态路由的形式：
详情页动态路由及banner布局

引入这个组件：

在pages下创建detail文件夹，并创建Detail组件，点击就会实现路由跳转显示内容了：

4. 先来做页面的布局

Banner页面的布局
在detail中创建components文件夹，在该文件夹中创建Banner组件，名字为DetailBanner，并在Detail组件中引入并注册局部组件：

<template>
  <div>
    <detail-banner></detail-banner>
  </div>
</template>

<script>
  import DetailBanner from './components/Banner'
  export default {
    name: 'Detail',
    components: {
      DetailBanner
    }
  }
</script>

可以页面上正常显示，就说明我们的子组件成功引入了。

样式
为了让页面不抖动我们还是这样写样式，让高度自适应的撑开：
- 加入iconfont图标：
到iconfont官网下载图片icon，然后下载解压，将新的四个字体文件替换掉旧的四个字体文件：

然后就可以复制图片icon的代码，粘贴到模板布局中：

可是，小图标依然没有显示出来，这是因为我们少复制了一段儿代码，在我们下载的新的字体库文件里会有一个iconfont.css文件，其他的代码变化不大，有一句base：64的代码需要我们把他替换掉。

到我们assets文件夹下的iconfont.css当中把旧的这句替换掉，就渲染出我们的图标了：
从上到下透明度从0到0.8的渐变效果，在banner-info中：

5. 公用图片画廊组件拆分

当我们点击顶部banner时，会弹出一个画廊组件。在图片画廊里我们可以进行图片的轮播，下面还会展示现在位于第几张图片。在src目录下创建文件夹common，在common中我们来存放全局公用的一些组件，在common下创建gallery文件夹，进步在其中创建Gallery.vue，在组件中起名为CommonGallery。
接下来要在build下的webpack.base.conf.js中写一段代码，resolve中有我们之前定义的别名，现在加一个common的别名，让他只想我们src目录下的common文件夹：

接下来需要重启一下服务器，这样对webpack的修改才会生效。这样公用的组件就定义好了，我们需要在banner组件中去使用：
首先在banner中引入，然后通过一个局部组件去使用它：

然后在模板banner最外层再包裹一个div，在banner模板下方添加子组件common-gallery：

这时gallery就会正常的显示在页面上。
下面要对Gallery进行布局设计：

其中container样式的前三句是使弹性盒子里的内容垂直居中。
然后设计轮播图：

效果：

我们回到代码里，将轮播图swiper-slide复制几份放在swiper中：
设计分页提示：
添加swiper-pagination：

搜索swiper，打开swiper3下的查看API文档，找到分页器，选择分页器样式类型：

在data中定义，并且重新定义分页器颜色：

效果：

再次定义样式，可以看到分页符变没了：

因为我们在wrapper中设置了overflow：hidden，把高度限制死了，所以扩展出的内容就显示不了了，去掉。但是发现去掉后还是不显示，是因为swiper-container上也有一个overflow-hidden。我们可以这么写：

效果：
逻辑设计
首先我们的数据肯定不能是自己写死的，而是外部调用组件的时候传递进来的，这样的话我们就需要接收，从外部接收一个imgs的属性，类型必须是Array，default是一个函数，返回一个数组：

再次回到页面上，是没有问题的，虽然没有从外部传入json数据，但是循环了default里定义的默认值：

我们先将默认值剪切掉，作为公用组件不应该有默认值：
在banner中用这个组件的时候，给他传一个属性imgs，等于imgs这样的一个数据：

在data中定义这个数据：

画廊默认是隐藏的：

定义在data中，默认是false：

想要让画廊显示，点击banner区域，展示画廊，给banner绑定一个click事件：

然后在methods中定义：
Bug：这个时候轮播图出现了些问题，是因为一开始我们让common-gallery处于隐藏状态，如过点击让他再次显示的话，swiper计算宽度会有些问题，导致轮播图无法正常滚动：

解决：打开Gallery.vue，添加两个配置项observeParents和observer，意思是我这个swiper插件只要监听到我这个元素或者是父级元素发生了dom结构的变化的时候，会自动的刷新一次，通过这次刷新就会解决swiper宽度计算的问题：
最后我们希望点击轮播图的时候，可以将轮播图关闭掉，给container绑定一个事件：

在methods中定义：

调用者Banner.vue中的common-gallery监听这个事件并在methods中定义：

当我们点击画廊黑色的区域就可以隐藏画廊区域了。

6. 提交到线上

详情页动态路由及banner布局

相关推荐