简单的豆瓣app页面，实现了电影，电影列表，电影详情，用到vue全家桶，通过rgbaster.js根据图片动态改变详情页的颜色。完善路由动画，左切右切上切下切.....
git:https://github.com/MrMoveon/douban
详细看图，下面附上项目用上的一些插件及解决问题：
下面说一下项目中遇到的一些问题及解决方法：
1、vue-cli vue2.0打包的时候,会找不到路径，这时需要修改
找到config里的index.js,打开修改build的assetsPublicPath 为“.”
2.加载其他js插件，需要在其他js插件底部export,例如swiper插件
export default window.Swiper;
3.加载背景图片，静态mp3文件，资源找不到
建议将静态文件放入static文件夹中，就不会出现这个问题！
4.仿app切换路由动画
通过watch监听路由。判断路由的深度来识别是否为子路由，从而达到切换的效果
<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，不然动画切换的时候会出现页面上下跳动的问题。现在是这么解决的，不知道有什么其他方法。
.page{
position: absolute;
left:0;
right: 0;
top:0;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
并且需要采用固定定位的形式来布局，不然会出现顶部header，footer切换的时候会隐藏的问题
5.图片颜色获取插件rgbaster.js
rgbaster.js可以获得图片的主色，次色等，然后，发挥我们的创意，实现一些精彩的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是调色板，含多个主要颜色，数组
console.log(payload.dominant);
console.log(payload.secondary);
console.log(payload.palette);
}
});
就一个方法，RGBaster.colors就可以了，第1个参数img可以是图片DOM也可以是图片的URL地址。后面就是可选参数，说到可选参数，不只success这一个，还有下面这几位兄弟：
RGBaster.colors(img, {
paletteSize: 30, // 调色板大小
exclude: [ 'rgb(255,255,255)' ], // 不包括白色
success: function(payload){
// 包含一些颜色信息(payload)的回调
}
})
paletteSize为30, 则payload.palette就是个包含前30主要颜色值的数组。
