【vue项目实战】Vue工程化项目--猫眼电影移动端(三)

 阅读约 14 分钟

vue工程化第三节

  • 组件化开发,标题部分
  • 多处用到的代码就在全局进行注册
  • 优化用户体验:当网速过慢时,显示加载动画。
  • 播放宣传片
  • 保留组件状态,避免重新渲染 keep-alive
  • 图片懒加载
  • 本节完整demo

第一节

组件化开发(标题)

思想:不同种类的组件,划分不同模块

从首页进入详情页,标题文字会改变,也会多出一个返回按钮,但样式还是不变的,所以这里也可以拆分为一个组件(我不会告诉你们,是我在上一节玩忘记拆分了[/坏笑]),标题文字可以用占位符 <slot> 来解决,返回按钮的显示可以使用 v-if

搞起!

在 components 文件夹下新建组件 pageTitle.vue ,然后把标题部分拆分出来:

<template>
  <div class="pageTitle">
    <div class="goback" v-if='showBack'  @click="$router.back()">
      <img src="@/assets/img/back.png" >
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
    name: 'pageTitle',
    props: ['showBack'] // 通过这个属性确定是否显示返回图标
}
</script>

<style lang="scss" scoped>
.pageTitle {
    height: 51px;
    width: 100%;
    background-color: rgb(229, 72, 71);
    text-align: center;
    line-height: 51px;
    color: #fff;
    font-size: 1.1em;
    >.goback {
        position: absolute;
        left: 12px;
        top: 8px;
        >img {
            width: 35px;
        }
    }
}
</style>

而这个组件会被多个页面使用,所以进行全局注册

main.js 中:

// ...
import pageTitle from './components/pageTitle'
// 注册全局组件
Vue.component('pageTitle',pageTitle)
// ...

然后就可以在其它页面使用啦

index.vue 中进行如下修改,不会显示返回按钮:

在这里插入图片描述

movieDetail.vue 中加入以下代码,参数不懂的看前两节

在这里插入图片描述

到这里,这个标题组件已经拆分完成。

加载动画组件

加载动画也算是一个单独的组件,但它不属于页面中的某一板块,这种组件可以再划分成一个组件模块,为这些组件也创建一个文件夹(因为这个项目不大,也可以不用划分的这么细,直接把他写到 components 里面,但这里主要介绍做项目的一个思想,这可能也与个人习惯有关) 。 如下:

在这里插入图片描述

然后,写代码:

<template>
  <div>
    <div class="loading-bg">
      <img class="loading" src="../assets/img/loading.gif">
    </div>
  </div>
</template>
<script>
export default {
  name: "loading"
};
</script>
<style lang='scss' scoped>
// ...样式参考demo
</style>

因为它也会在多个页面中使用,所以把它也在 main.js 中注册为全局组件,然后就可以在其它页面中使用了。现在是不是已经对组件和组件化开发清晰了很多。

把它放在热映页,看一下效果:

在这里插入图片描述

emm,虽然不是那么精致,但效果还是实现了。但它一直在转圈圈啊,所以,要控制它一下。

img

(其实我觉得上面这个动图做loading样式也不错 [/斜眼笑] )

然后,代码搞起:

// 在需要使用这个组件的页面中加入一个标记,这里以hoting为例
<template>
  <div>
      <!-- isReady: 数据加载好了就不显示loading动画 -->
     <loading v-if="!isReady"></loading>
    <div class="hoting">
      <movie-list v-for="(h_item,index) in hotList" :key="index" :mitem="h_item"></movie-list>
    </div>
  </div>
</template>

<script>
import movieList from "./movieList"
import axios from 'axios'

export default {
   name: "hoting",
   data() {
      return {
         isReady:false, // 记录数据是否加载完毕
         hotList: []
      };
   },
   created() {
      axios
         .get("http://www.softeem.xin/maoyanApi/ajax/movieOnInfoList")
         .then(res => {
            this.hotList = res.data.movieList;
            this.isReady=true; //数据加载完毕
         });
   },
   components: {
      movieList
   }
};

</script>

<style scoped>
</style>

这个时候把网络换成 Slow 3G 刷新页面进行测试:

在这里插入图片描述

ok,完成了。效果还可以呢,[🤩]

播放宣传片

这里主要用到 video 标签,通过自定义属性 showPlayVD 来控制显示播放面板。样式参考demo

<!-- 写在movieDetail.vue -->
<div class="play-vd" v-if="showPlayVD" @click="showPlayVD=false">
    <video controls autoplay :src="movieDetail.vd" width="100%"> </video>
</div>

点击显示播放面板

在这里插入图片描述

保留组件状态,避免重新渲染

在开发Vue项目的时候,有一部分组件是没必要多次渲染的

方式:使用 keep-alive 包裹路由组件。

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。而且它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 keep-alive参考

  • 首先看一下没有使用 keep-alive ,先进入详情页,然后把所有请求清空

在这里插入图片描述

  • 然后点击返回,看一下请求回来的数据,有很多

在这里插入图片描述

  • 现在使用 keep-alive (在App.vue文件中使用)

    <template>
      <div id="app">
        <keep-alive>
          <!-- 当前路由会被缓存 -->
          <router-view v-if="$route.meta.keepAlive"/>
        </keep-alive>
    
        <router-view v-if="!$route.meta.keepAlive"/>
      </div>
    </template>

    然后更改路由配置:

    // 路径:router/index.js
    routes: [{
                path: '/',
                name: 'index',
                component: index,
                meta:{
                    keepAlive:true // 在meta属性中设置自定义属性,为true则保留路组件状态
                }
            }
             // ...
          ]
  • 这个时候随便点击一个电影的详情页,然后清空所有请求,再点击返回看一下。(我点的是调音师)

    在这里插入图片描述

图片懒加载

不使用图片懒加载的情况下,会在页面第一次加载时,将所有图片资源进行加载。假设有大量图片资源需要加载,则等待加载完成会需要很长时间,极其影响用户体验。这个时候使用图片懒加载就很有必要性,它会只加载你当前屏幕中的图片资源。

需要安装 vue-lazyload 参考

npm install vue-lazyload -D

使用:

  • 首先在main.js 文件中引入并使用

    // 图片懒加载
    import VueLazyload from 'vue-lazyload'
    import errorImg from '../src/assets/img/error.png'
    import loadingImg from '../src/assets/img/loading.gif'
    
    // 加载懒加载插件
    Vue.use(VueLazyload,{
      error: errorImg,
      loading: loadingImg
    })
  • 然后在需要使用图片懒加载的地方,将 :src 修改为 v-lazy 即可,(这里是 movieList.vue 文件)

    在这里插入图片描述

  • 看一下效果

在这里插入图片描述

  • 本节完整 demo
  • 还有底部菜单,vuex,未完。。

第一节

阅读 656更新于 2019-05-07

推荐阅读
漫漫前端路
用户专栏

热爱前端,学习、交流和分享前端技术,总结项目中出现的问题。前端攻城狮的升级之路。

6 人关注
25 篇文章
专栏主页
目录