文章目录
1.封装选项卡
App.vue
<template>
<div>
<!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 -->
<tabbar></tabbar>
<router-view></router-view>
</div>
</template>
<script>
// 导入组件tabbar
import tabbar from "./components/tabbar"
export default {
name: "App",
components: {
tabbar,
},
};
</script>
src/components/tabbar.vue
<template>
<footer>
<ul>
<router-link to="/Film" custom v-slot="{navigate,isActive}">
<li @click="navigate" :class="isActive?'myactive':''">
<i class="iconfont icon-dianying">热映电影</i>
</li>
</router-link>
<router-link to="/Cinema" custom v-slot="{navigate,isActive}">
<li @click="navigate" :class="isActive?'myactive':''">
<i class="iconfont icon-yingyuan">附近影院</i>
</li>
</router-link>
<router-link to="/Center" custom v-slot="{navigate,isActive}">
<li @click="navigate" :class="isActive?'myactive':''">
<i class="iconfont icon-icon_pc">个人中心</i>
</li>
</router-link>
</ul>
</footer>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 2.722222rem;
background: white;
ul{
display: flex;//父元素设置弹性盒
li{
//子元素都设置flex: 1:子元素平分并占满父盒子
flex:1;
line-height: 2.722222rem;
text-align: center;
}
}
}
</style>
2.设置iconfont
main.js
import '@/assets/iconfont/iconfont.css'
tabbar.vue
<i class="iconfont icon-dianying">热映电影</i>
<i class="iconfont icon-yingyuan">附近影院</i>
<i class="iconfont icon-yingyuan">个人中心</i>
3.nowPlaying获取数据后写样式
3.1.获取后台数据
详见:2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
3.2.从data对象获取电影海报,标题,评分
<!-- 获取电影海报 -->
<img :src="data.poster" alt="">
<!-- 获取电影标题 -->
<h3>{{data.name}}</h3>
<!-- 获取观众评分 -->
<p>观众评分{{data.grade}}</p>
3.3.过滤data.actor,获取演职员表
使用全局过滤器:actorfilter
<p>{{data.actors | actorfilter}}</p>
注册全局过滤器:actorfilter
import Vue from "vue"
Vue.filter('actorfilter',function(data){
//回顾map的用法:
// console.log([0,1,2].map(item=>`我是第${item+1}名`));
// 处理data.name数组
var newList=data.map(item=>item.name);
// console.log(newList);
return newList.join(' ');
});
3.4.nowPlaying.vue
<template>
<div>nowPlaying...
<ul>
<li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data)">
<!-- {{data.name}} -->
<!-- 获取电影海报 -->
<img :src="data.poster" alt="">
<!-- 获取电影标题 -->
<h3>{{data.name}}</h3>
<!-- 获取观众评分 -->
<p>观众评分{{data.grade}}</p>
<!-- 获取导演和主演信息:此处要处理一下数组data.actors(过滤) -->
<p>{{data.actors | actorfilter}}</p>
</li>
</ul>
</div>
</template>
<script>
import axios from "axios"
// 注册过滤器需要用到Vue,所以引入vue:在哪使用就在哪引入
import Vue from "vue"
Vue.filter('actorfilter',function(data){
//回顾map的用法:
// console.log([0,1,2].map(item=>`我是第${item+1}名`));
// 处理data.name数组
var newList=data.map(item=>item.name);
// console.log(newList);
return newList.join(' ');
});
export default {
data(){
return{
// datalist:["1111","2222","3333"]
datalist:[]
}
},
methods:{
handleChangePage(id){
console.log(id);
this.$router.push({name:'renameDetail',params:{id:id}});
}
},
mounted(){
// 网络>复制>复制链接地址
// axios.get("https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2318535")
// 使用axios的完整写法配置字段
/*字段获取:网络>标头>请求标头>
X-Client-Info: {"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}
X-Host: mall.film-ticket.film.list */
axios({
url:"https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2318535",
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}',
' X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{
console.log("获取数据data:",res.data);
// console.log("获取数据data:",res.data.data.films);
this.datalist=res.data.data.films;
})
}
}
</script>
<style lang="scss" scoped>
ul{
li{
padding:10px;
overflow:hidden;
img{
float: left;
width: 100px;
}
}
}
</style>