二、詳情頁(yè)

電影詳情頁(yè)

這里不貼全部代碼了，只用關(guān)鍵代碼說(shuō)明下當(dāng)時(shí)遇到的幾個(gè)問(wèn)題：

①高斯模糊

高斯模糊

這里共有兩個(gè)，一個(gè)class=“blur”(高斯模糊背景)，一個(gè)class=“info”(電影信息)。剛開始是本著Android的布局設(shè)計(jì)思維去寫這個(gè)布局，這不就是個(gè)RelativeLayout嗎，寫著寫著到最后效果出來(lái)，發(fā)現(xiàn)作者還是太天真，信息那一欄我莫名其妙寫到高斯模糊的下面了，也就是寫成了LinearLayout且orientation=vertical，當(dāng)時(shí)就笑自己：你現(xiàn)在又不是在寫Android，醒醒!孩子~主要原因是CSS3的知識(shí)不夠，所以我就老老實(shí)實(shí)去學(xué)習(xí)了一番，下面便是代碼：

高斯模糊和絕對(duì)布局

filter:blur(30px)和-webkit-filter:blur(30px)形成了高斯模糊的效果(內(nèi)心OS：如果是Android的話又是一大堆代碼)。info中的position:relative、z-index:1，blur中的position：absolute、z-index:0相結(jié)合就能展示出上面的效果，關(guān)鍵在于info中的z-index要大于blur的，表示顯示在blur的上方，還要保證info是相對(duì)的，blur是絕對(duì)的，感興趣并且沒(méi)接觸過(guò)CSS3的盆友可以下載代碼自己去試試改改看看效果，不要像作者一樣以為自己會(huì)反而是自作聰明。

②點(diǎn)擊顯示全部

點(diǎn)擊圖標(biāo)顯示全部

這里本猿又要贊揚(yáng)一下三元運(yùn)算符了：

影片簡(jiǎn)介

.js文件中在data里設(shè)置三個(gè)變量

參數(shù)

showall方法

showall方法

hideText布爾值用來(lái)判斷當(dāng)前是否為隱藏狀態(tài)，用style="{{hideText?'-webkit-line-clamp:3':' '}}"設(shè)置顯示行數(shù)，當(dāng)hideText為true是顯示3行，否則不給值，即默認(rèn)。定義hideClass來(lái)控制箭頭的指向，‘down’表示當(dāng)前簡(jiǎn)介為隱藏，‘up’表示顯示了全部，對(duì)于圖標(biāo)旋轉(zhuǎn)這里只需給個(gè)旋轉(zhuǎn)屬性就行

箭頭180°旋轉(zhuǎn)

好了，在詳情頁(yè)中花的時(shí)間比較多的就在這兩處了，還是那句老話：不明白的多去查找些資料。

評(píng)論部分就是簡(jiǎn)單的列表，這里不再詳細(xì)說(shuō)明。

三、電影院列表

影院列表

這里只是簡(jiǎn)單的列出信息就行了，在布局上沒(méi)難點(diǎn)，不過(guò)代碼可以優(yōu)化下，為了省事所以就沒(méi)去寫了，就簡(jiǎn)單為了實(shí)現(xiàn)下效果。

今天的內(nèi)容就和大家介紹到這里了，想要了解更多精彩內(nèi)容請(qǐng)繼續(xù)關(guān)注腳本之家！

最新評(píng)論