十二、Vue项目 - 详情页动态路由、banner布局和公用图片画廊组件拆分

我是一个小菜鸡啊小菜鸡，但是小菜鸡要继续学新东西啊，新的一周加油吧！！！

文章目录

配置动态路由
banner.vue
公用图片画廊组件拆分
- src下新建common文件夹
- banner.vue中使用gallary组件
- Gallary.vue
- Gallary.vue和Banner.vue最外面大div分别添加点击事件

配置动态路由

新建detail文件夹 ,在Detail.vue中写一下基本内容

找到home文件夹下的Recommend.vue组件，需要在li标签上添加router-link声明式导航携带参数跳转页面

banner.vue

这里要注意的就是引入新的iconfont图标时候，需要把之前iconfont文件夹中的四个替换成新的，iconfont.css中其中有个url(base64)也复制换成新的,这样新下载的图标才会生成

在class名为banner-info上加一个渐变
background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8));

<template><div class="banner"><imgclass="banner-img"src="//img1.qunarzz.com/sight/201406/23/57bf93474047fe36c8d65eac.jpg_600x330_76157d99.jpg"/><div class="banner-info"><div class="banner-title">大连圣亚海洋世界(AAAA景区）</div><div class="banner-number"><span class="iconfont banner-icon"></span>39</div></div></div>
</template><script>
export default {name: 'Banner'
}
</script><style lang="scss" scoped>
.banner {overflow: hidden;height: 0;padding-bottom: 50%;position: relative;.banner-img {width: 100%;}.banner-info {display: flex;position: absolute;left: 0;right: 0;bottom: 0;line-height: 0.6rem;color: #fff;background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8));.banner-title {flex: 1;font-size: 0.32rem;padding: 0 0.2rem;}.banner-number {height: 0.4rem;line-height: 0.4rem;margin-top: 0.1rem;padding: 0 0.32rem;border-radius: 0.2rem;background: rgba(0, 0, 0, 0.6);font-size: 0.24rem;.banner-icon{margin-right: 0.1rem;}}}
}
</style>

公用图片画廊组件拆分

src下新建common文件夹

画廊组件可能以后别的页面也需要，就把它变成全局公用组件，src下新建common文件夹

去bulid文件夹下修改路径，修改完后记得重启服务器npm run dev，webpack的修改才会生效

banner.vue中使用gallary组件

Gallary.vue

需要加入轮播图
当时下载的是swiper3，所以去阅读swiper3的API文档
地址： https://3.swiper.com.cn/api/pagination/2016/0126/299.html
paginationType : 'fraction’这个属性使我们这次所需要的

for循环图片，父传子，子组件接收数组

banner.vue父组件传数据

浏览效果发现swiper出现了问题

问题原因：
一开始让common-gallary组件处于隐藏状态，再次显示出来的时候swiper计算的宽度会有些问题，导致轮播图无法正常滚动。

解决方法：
地址：https://3.swiper.com.cn/api/Observer/2015/0308/219.html
swiper插件只要监听到子组件或父组件Dom元素发生变化时，会自动的自我刷新一次，通过自我刷新就会解决swiper宽度计算问题

Gallary.vue和Banner.vue最外面大div分别添加点击事件

Gallary.vue

<template><div class="container" @click="handleGallaryClick"><div class="wrapper"><swiper :options="swiperOption"><swiper-slide v-for="(item, index) in imgs" :key="index"><img class="gallary-img" :src="item" /></swiper-slide><!-- 用于分页 --><div class="swiper-pagination" slot="pagination"></div></swiper></div></div>
</template><script>
export default {name: 'CommonGallary',props: {imgs: Array},data() {return {swiperOption: {pagination: '.swiper-pagination',paginationType: 'fraction',observer: true,observeParents: true}}},methods: {handleGallaryClick() {this.$emit('close')}}
}
</script><style lang="scss" scoped>
.container >>> .swiper-container {overflow: inherit;
}
.container {display: flex;flex-direction: column;justify-content: center;z-index: 99;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #000;.wrapper {height: 0;width: 100%;padding-bottom: 100%;.gallary-img {width: 100%;}.swiper-pagination {color: #fff;bottom: -0.8rem;}}
}
</style>

Banner.vue

<template><div><div class="banner" @click="handleBannerClick"><imgclass="banner-img"src="//img1.qunarzz.com/sight/201406/23/57bf93474047fe36c8d65eac.jpg_600x330_76157d99.jpg"/><div class="banner-info"><div class="banner-title">大连圣亚海洋世界(AAAA景区）</div><div class="banner-number"><span class="iconfont banner-icon"></span>39</div></div></div><common-gallary :imgs="imgs" v-show="showGallay" @close="handleGallaryClose"></common-gallary></div>
</template><script>
import CommonGallary from 'common/gallary/Gallary'
export default {name: 'DetailBanner',data() {return {showGallay: false,imgs: ['http://img1.qunarzz.com/sight/p0/1503/b9/b9a4593c73228f9c.water.jpg_r_800x800_fa55893f.jpg','http://img1.qunarzz.com/sight/p0/1411/a3/a4fd8afc9123ba0e0253d80e473b2185.water.jpg_r_800x800_a9b4d0f2.jpg']}},methods:{handleBannerClick(){this.showGallay = true},handleGallaryClose (){this.showGallay = false}},components: {CommonGallary}}
</script><style lang="scss" scoped>
.banner {overflow: hidden;height: 0;padding-bottom: 50%;position: relative;.banner-img {width: 100%;}.banner-info {display: flex;position: absolute;left: 0;right: 0;bottom: 0;line-height: 0.6rem;color: #fff;background-image: linear-gradient(top,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.8));.banner-title {flex: 1;font-size: 0.32rem;padding: 0 0.2rem;}.banner-number {height: 0.4rem;line-height: 0.4rem;margin-top: 0.1rem;padding: 0 0.32rem;border-radius: 0.2rem;background: rgba(0, 0, 0, 0.6);font-size: 0.24rem;.banner-icon {margin-right: 0.1rem;}}}
}
</style>