2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式

文章目录

1.封装选项卡
2.设置iconfont
3.nowPlaying获取数据后写样式
- 3.1.获取后台数据
- 3.2.从data对象获取电影海报,标题,评分
- 3.3.过滤data.actor,获取演职员表
- 3.4.nowPlaying.vue

1.封装选项卡

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.获取后台数据

详见: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>

2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式相关推荐

2021-12-02 vue移动端卖座电影项目(五) 封装Film下的二级路由,FilmHeader实现吸顶效果
文章目录 1.封装Film下的二级路由目的/效果步骤 2.让FilmHeader.vue实现向下滑动时的吸顶效果(固钉效果) 思路步骤最终效果 3.离开Film页面时取消触发handleScr ...
2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨
文章目录 0.实现效果 1.封装详情页的轮拨组件DetailSwiper 2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名 3.最终代码和效果代码 ...
2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页卖座电影 1.获取url数据位置:网络>复制>复制链接地址 2.获取电影列表数据字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
2021-11-30 vue移动端卖座电影项目(四) 当前项目代码
文章目录 0.目录和package.json依赖 1.src/assets/iconfont(文件夹) 2.src/components/tabbar.vue 3.router/index.js 4. ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...
2021-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)
文章目录 0.事件总线复习 1.显隐逻辑 2.Detail.vue和它要控制的tabbar.vue不是父子关系 3.使用中央事件总线来控制 4.效果 0.事件总线复习 2021-10-21 vue笔记 ...
2021-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabbar的显隐,mutation的用法,this.$store.commit()的两个参数
文章目录 0.vuex复习 1.引入 2.在state中存showTabbar后,直接可以引用 3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值 4.效果:实现进入详情页 ...
2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式
1.带着id传到详情页面中效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId http://localhost:8081/#/Detail/6112 http:// ...
2021-12-08 vue移动端卖座电影项目(八) 获取后台电影院数据,使用BetterScroll为电影院页面Cinema.vue设置滚动效果
文章目录 1.使用axios获取后台数据 2.把影院名遍历到页面中 3.better-scroll 3.1.安装命令`cnpm install --save better-scroll` 3.2. 引 ...

2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式

文章目录

1.封装选项卡

2.设置iconfont

3.nowPlaying获取数据后写样式

3.1.获取后台数据

3.2.从data对象获取电影海报,标题,评分

3.3.过滤data.actor,获取演职员表

3.4.nowPlaying.vue

2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式相关推荐

最新文章

热门文章