【vue項目實戰】Vue工程化項目--貓眼電影移動端（三）

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，雖然不是那麼精緻，但效果還是實現了。但它一直在轉圈圈啊，所以，要控制它一下。

（其實我覺得上面這個動圖做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，未完。。

---

第一節