豆瓣app實例+vue全家桶

簡單的豆瓣app頁面于宙,實現(xiàn)了電影浮驳,電影列表,電影詳情捞魁,用到vue全家桶抹恳,通過rgbaster.js根據(jù)圖片動態(tài)改變詳情頁的顏色。完善路由動畫署驻,左切右切上切下切.....

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.加載背景圖片,靜態(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切換的時候會隱藏的問題

Paste_Image.png

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ù)組寨蹋。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末松蒜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子已旧,更是在濱河造成了極大的恐慌秸苗,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件运褪,死亡現(xiàn)場離奇詭異惊楼,居然都是意外死亡玖瘸,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門檀咙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來雅倒,“玉大人,你說我怎么就攤上這事弧可∶锵唬” “怎么了?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵棕诵,是天一觀的道長裁良。 經(jīng)常有香客問我,道長校套,這世上最難降的妖魔是什么价脾? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮搔确,結(jié)果婚禮上彼棍,老公的妹妹穿的比我還像新娘。我一直安慰自己膳算,他們只是感情好座硕,可當我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著涕蜂,像睡著了一般华匾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上机隙,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天蜘拉,我揣著相機與錄音,去河邊找鬼有鹿。 笑死旭旭,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的葱跋。 我是一名探鬼主播持寄,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼娱俺!你這毒婦竟也來了稍味?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤荠卷,失蹤者是張志新(化名)和其女友劉穎模庐,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體油宜,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡掂碱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年怜姿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片顶吮。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡社牲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出悴了,到底是詐尸還是另有隱情,我是刑警寧澤违寿,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布湃交,位于F島的核電站,受9級特大地震影響藤巢,放射性物質(zhì)發(fā)生泄漏搞莺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一掂咒、第九天 我趴在偏房一處隱蔽的房頂上張望才沧。 院中可真熱鬧,春花似錦绍刮、人聲如沸温圆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽岁歉。三九已至,卻和暖如春膝蜈,著一層夾襖步出監(jiān)牢的瞬間锅移,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工饱搏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留非剃,地道東北人。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓推沸,卻偏偏與公主長得像备绽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子坤学,可洞房花燭夜當晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評論 25 707
  • 喜歡清晨第一縷陽光的照在皮膚上的感覺疯坤,讓人安心。喜歡午后的清風深浮,吹動無數(shù)少女的長發(fā)压怠,青春飛揚。更喜歡溫熱的余暉渲染...
    女子愛紅妝閱讀 359評論 0 1
  • 背景 我們當前的產(chǎn)品屬于汽車后市場行業(yè)飞苇,面向的用戶是汽車維修廠以及配件商菌瘫,并沒有面向個人的用戶蜗顽。所以對于我們這些一...
    小7閱讀 260評論 0 0
  • 期末口語考試有個話題是雇盖,你會經(jīng)常給別人提建議嗎?為什么栖忠?我覺得這個問題應該引起廣大同行的思考崔挖,畢竟當老師的真的有點...
    閑云phanie閱讀 283評論 1 1