文章目录
1.封装选项卡2.设置iconfont3.nowPlaying获取数据后写样式3.1.获取后台数据3.2.从data对象获取电影海报,标题,评分3.3.过滤data.actor,获取演职员表3.4.nowPlaying.vue1.封装选项卡
App.vue
<template><div><!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 --><tabbar></tabbar><router-view></router-view></div></template><script>// 导入组件tabbarimport 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.获取后台数据
详见:-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("/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:"/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>
如果觉得《-11-27 vue移动端卖座电影项目(二) 封装选项卡 引入iconfont nowPlaying获取数据后写样式》对你有帮助，请点赞、收藏，并留下你的观点哦！
