大概步驟：

目標效果

三、排行榜首頁新增公共元件

• 要點：
  • “滾動”元件
  • “載入中”元件
  • “mixin”重複邏輯js

1. 滾動元件

<!--scroll是插槽元件，可為它新增class，寫上固定頁面的定位，傳入data用於refresh滾動元件-->
<scroll class="rank" :data="..." ref="scroll">
	<ul>
		...
	</ul>
</scroll>

import Scroll from '@/common/scroll/Scroll'	//引入滾動元件

components:{
	Scroll,
 
	//定義元件
}

2. 載入中元件

<scroll class="rank" :data="..." ref="scroll">
	<ul>
		...
	</ul>
	<!--‘載入中’元件-->
	<loading class="loading-container" v-show="!..."></loading>
</scroll>

import Loading from '@/common/loading/loading'	//引入載入元件

components:{
	Scroll,	//註冊滾動元件
	Loading	//註冊載入中元件
 

}

3. “mixin”重複邏輯js
   • 用於重新定位頁面定位的bottom
   • refrersh滾動外掛
   • 在有播放器小部件的時候，不會自動refresh，因此需要mixin解決多個元件的重複的程式碼

import {playlistMixin} from '@/common/js/mixin'	//引入mixin重複方法

methods:{
	/******mixin方法引入************/
  	handlePlaylist(playlist){
  		const bottom = playlist.length>0 ? '60px':''	//判斷當播放列表中有值的時候（播放器小元件show的時候）
 

        this.$refs.scroll.$el.style.bottom = bottom
        this.$refs.scroll.refresh()
  	},
}

專案來源：慕課網 如有建議和疑問可聯絡 QQ：1017386624 郵箱：[email protected]