实现功能:进入详情页时,隐藏页面底部的tabbar,退出详情页时,显示底部的tabbar
进入详情页(隐藏tabbar)
退出详情页(显示底部灰色的tabbar)
方法:用事件总线来实现
tabbar和Detail是非父子关系,对于这种非父子之间的通信(适用于项目中用到非父子通信的地方比较少的情况),引入事件总线可实现
(1)首先创建下面目录,并在bus/index.js中创建事件总线
(2) 在App.vue中用事件总线监听事件,在Detail.vue中用事件总线触发事件
操作的都是同一个总线。通过控制isshow的值,来决定是否显示tabbar
(2.1)在App.vue 监听事件
使用beforeMount是为了解决单独刷新detai页面时,tabbar不隐藏的问题。要在其之前触发
(2.2)在Detail.vue 触发事件,并传值
(3)代码
App.vue
<template>
<div>
<!--控制底部tabbar的显示-->
<tabbar v-show="isshow"></tabbar>
<!--路由容器,类似插槽。以便路由组件的显示-->
<router-view></router-view>
</div>
</template>
<script>
//导入Tabbar组件
import tabbar from '@/components/Tabbar'
import axios from 'axios'
//引入总线(监听)。index.js可省略(与Detail.vue中引入的都是同一个总线)
import bus from '@/bus'
export default{
data(){
return{
datalist:[],
isshow:true
}
},
components: {//定义局部组件
tabbar
},
beforeMount () {
//监听事件maizuo(控制tabbar显示隐藏)。事件maizuo在Detail.vue中触发
bus.$on("maizuo",(data)=>{ //data为事件触发时,穿过来的值
//console.log("maizuo被通知了",data)
this.isshow = data;
})
}
}
</script>
<style lang="scss">
/*lang="scss"表示style中支持scss语法*/
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
li{
list-style: none;
}
</style>
Detail.vue
<template>
<!-- 避免filmlist为空报错的情况 -->
<div v-if="filmlist">
<img :src="filmlist.poster" class="poster">
<h2>{{filmlist.name}}</h2>
<h3>演职人员</h3>
<swiper preview="4" class="actorswiper" myclass="actorswiper">
<div class="swiper-slide" v-for="data in filmlist.actors" :key="data.name">
<img :src="data.avatarAddress">
<p>{{data.name}}</p>
</div>
</swiper>
<h3>剧照</h3>
<swiper preview="3" class="photoswiper" myclass="photoswiper">
<div class="swiper-slide" v-for="(data,index) in filmlist.photos" :key="index">
<img :src="data">
</div>
</swiper>
</div>
</template>
<script>
import axios from 'axios'
//引入detailswiper组件
import swiper from './Detail/DetailSwiper'
//引入总线(触发)。index.js可省略(与App.vue中引入的都是同一个总线)
import bus from '@/bus'
export default {
components: {
swiper
},
//props: ['id'], //获取传过来的数据myid
data(){
return{
id:'',
filmlist:null
}
},
//进入Detail页面,隐藏tabbar。
beforeMount () {
console.log("hidetabbar")
bus.$emit("maizuo",false) //触发事件maizuo,并传值false,隐藏
},
//将获取的相应电影详情信息放到filmlist中
mounted () {
// console.log("获取详情信息",this.$route.params.myid)
this.id=this.$route.params.myid
axios({
url:`https://m.maizuo.com/gateway?filmId=${this.id}&k=2152933`,
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873","bc":"110100"}',
'X-Host': 'mall.film-ticket.film.info'
}
}).then(res=>{
console.log(res.data);
this.filmlist = res.data.data.film
})
},
//退出Detail.vue,显示tabbar
beforeDestroy () {
console.log("showtabbar"),
bus.$emit("maizuo",true)//触发事件maizuo,并传值true(显示)
}
}
</script>
<style lang="scss" scoped>
.poster{
width: 100%;
height: 240px;
}
</style>