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

前端OnTheRun

已于 2022-10-26 22:33:56 修改

阅读量532

点赞数

分类专栏： vue项目-卖座电影文章标签： vue.js javascript 前端

于 2021-11-27 19:08:52 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/121581767

版权

本文档介绍了在Vue移动端卖座电影项目中如何封装选项卡组件，设置Iconfont图标，并通过nowPlaying获取后台数据来展示电影的海报、标题、评分和演职员表。详细步骤包括在App和tabbar组件中封装选项卡，main.js中配置Iconfont，以及利用全局过滤器处理数据。

摘要由CSDN通过智能技术生成

文章目录

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=