簡單的豆瓣app頁面，實現(xiàn)了電影，電影列表，電影詳情，用到vue全家桶，通過rgbaster.js根據(jù)圖片動態(tài)改變詳情頁的顏色。完善路由動畫，左切右切上切下切.....
git:https://github.com/MrMoveon/douban
詳細(xì)看圖，下面附上項目用上的一些插件及解決問題：
下面說一下項目中遇到的一些問題及解決方法：
1、vue-cli vue2.0打包的時候,會找不到路徑，這時需要修改
找到config里的index.js,打開修改build的assetsPublicPath 為“.”
2.加載其他js插件，需要在其他js插件底部export,例如swiper插件
export default window.Swiper;
3.加載背景圖片，靜態(tài)mp3文件，資源找不到
建議將靜態(tài)文件放入static文件夾中，就不會出現(xiàn)這個問題！
4.仿app切換路由動畫
通過watch監(jiān)聽路由。判斷路由的深度來識別是否為子路由，從而達到切換的效果
<template>
<div id="app">
<loading v-if="$store.state.loading"></loading>
<transition :name="transitionName">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
transitionName: 'slide-left',
}
},
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
}
</script>
css動畫樣式
//透明度動畫
.slide-fade-enter,.slide-left-leave-active{
opacity: 0;
}
.slide-fade-enter, .slide-fade-leave-active {
opacity: 0;
}
//左右移動動畫
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
注意：動畫切換，一定要在切換的頁面的div加上以下css，不然動畫切換的時候會出現(xiàn)頁面上下跳動的問題。現(xiàn)在是這么解決的，不知道有什么其他方法。
.page{
position: absolute;
left:0;
right: 0;
top:0;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
并且需要采用固定定位的形式來布局，不然會出現(xiàn)頂部header，footer切換的時候會隱藏的問題
5.圖片顏色獲取插件rgbaster.js
rgbaster.js可以獲得圖片的主色，次色等，然后，發(fā)揮我們的創(chuàng)意，實現(xiàn)一些精彩的Web交互效果。
rgbaster.js的Github項目地址是：https://github.com/briangonzalez/rgbaster.js
參考的張鑫旭老師的教程：http://www.zhangxinxu.com/wordpress/2014/08/image-dominant-color-get-rgbaster-js/
var img = document.getElementById('image');
// 或者
var img = 'http://example.com/path-to-image.jpg'
RGBaster.colors(img, {
success: function(payload) {
// payload.dominant是主色，RGB形式表示
// payload.secondary是次色，RGB形式表示
// payload.palette是調(diào)色板，含多個主要顏色，數(shù)組
console.log(payload.dominant);
console.log(payload.secondary);
console.log(payload.palette);
}
});
就一個方法，RGBaster.colors就可以了，第1個參數(shù)img可以是圖片DOM也可以是圖片的URL地址。后面就是可選參數(shù)，說到可選參數(shù)，不只success這一個，還有下面這幾位兄弟：
RGBaster.colors(img, {
paletteSize: 30, // 調(diào)色板大小
exclude: [ 'rgb(255,255,255)' ], // 不包括白色
success: function(payload){
// 包含一些顏色信息(payload)的回調(diào)
}
})
paletteSize為30, 則payload.palette就是個包含前30主要顏色值的數(shù)組。
