豆瓣app实例+vue全家桶

简单的豆瓣app页面，实现了电影，电影列表，电影详情，用到vue全家桶，通过rgbaster.js根据图片动态改变详情页的颜色。完善路由动画，左切右切上切下切.....

git:https://github.com/MrMoveon/douban

详细看图，下面附上项目用上的一些插件及解决问题：

jdfw.gif
jdfw2.gif

下面说一下项目中遇到的一些问题及解决方法：

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切换的时候会隐藏的问题

Paste_Image.png

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主要颜色值的数组。