我是一个小菜鸡啊小菜鸡，但是小菜鸡要继续学新东西啊，新的一周加油吧！！！
文章目录
配置动态路由
新建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">
<img
class="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">
<img
class="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>