成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

當大多數(shù)人對Vue理解到爐火純青的時候，是不是該思考一下怎么讓vue頁面騷氣起來

lingdududu / 2587人閱讀

寫在前面

當大多數(shù)人Vue理解的爐火純青的時候，你應(yīng)該思考怎么讓vue頁面騷氣起來，下面就我個人在接觸Vue兩年的時間里，在實際工作中門戶網(wǎng)站在前端頁面交互應(yīng)用和技巧，炒幾道“小菜”給大家分享一哈，我把它封裝成一個項目vue-portal-webUI（github源碼），不敢說是UI，但也是各種常見常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎(chǔ)、數(shù)據(jù)基本上是mock，功能和場景的話，會在空閑的時候慢慢加上來，廢話不多說，直接上菜單：

小菜0、頁面布局之五彩斑斕的類似標簽欄

先來個效果熱熱身

上菜：


場景需求：最近設(shè)計濕丟來這樣的頁面設(shè)計，要求響應(yīng)式。正常老鐵們看到類似標簽欄的設(shè)計，作為前端要切出來估計頭皮一發(fā)麻，基本上實現(xiàn)的話要么簡單粗暴上背景圖，要么幾個div，作為對代碼有的潔癖的我就直接上v-for表單渲染，把中間這塊封裝了一個公用的容器組件wapper，（完整代碼，見本文后github鏈接）


原理：v-for去遍歷數(shù)組，把顏色加在背景上，樣式部分就不貼代碼了，原理就是css3的計算屬性calc分成6等分，然后各種陰影、圓角之類的一上效果杠杠的。

[題外話：至于性能方面沒有做過多的思考，v-for表單渲染與其他實現(xiàn)方式的性能對比，這里也不做過多講，這樣看起來代碼是優(yōu)雅的]

小菜1、愛心點贊，七夕特別貢獻

點贊場景，七夕了給相愛的ta一個贊吧

上菜：

場景需求：七夕馬上就要到了，開始估計又要虐狗了，根據(jù)喜歡程度可以進行多次點擊，從因為人群中偶然的一個回眸，平常到like,到love,再到love+,在到平常（點擊通過愛心顏色和文字提示表示親密度），項目中也常常出現(xiàn)，比如評論點贊，圖書推薦點贊等場景，這里我把愛心抽離出一個heart組件

原理：點贊功能究竟是怎么實現(xiàn)的呢，其實我在前一篇文章《從青銅到王者10個css3偽類使用技巧和運用，了解一哈》已經(jīng)提到了，其實就是用偽類實現(xiàn)鼠標經(jīng)過提示，點擊修改循環(huán)heart.level，切換class來修改提示（偽類透明度），和愛心顏色（完整代碼，見本文后github鏈接）

[題外話：以上數(shù)據(jù)都是mock模擬，其實請求的是github里面的數(shù)據(jù)，github提供的api可以看到很多數(shù)據(jù)，感興趣的同學可以拿取githubapi里自己的數(shù)據(jù)做一個關(guān)于自己的"大數(shù)據(jù)分析頁面"，很贊哦]

小菜2、讓新聞選項卡動起來

新聞選項卡，門戶網(wǎng)站出現(xiàn)概率賊高，告別枯燥無味翻動新聞選項卡，鼠標經(jīng)過動起來

上菜：

場景需求：選項卡標題鼠標經(jīng)過，對應(yīng)切換新聞內(nèi)容列表。jq深度患者，通?？吹筋愃茲L動推動效果的效果，肯定在想操作DOM啊，so easy。還是那句話，代碼強迫癥，es6和vue相結(jié)合，讓你盡可能告別DOM操作（完整代碼，本文后github鏈接）

原理：讓新聞內(nèi)容區(qū)news-listbox的寬度300%（因為有三個選項），超出部分隱藏，這邊標題選項只需要鼠標經(jīng)過的時候帶上index，計算margin-left多少，配合css3動畫，寥寥幾行ES6就實現(xiàn)了以上效果！
[題外話：以上數(shù)據(jù)都是mock模擬，里面其實很多值得大家可以看的亮點，比如怎么樣讓新聞第一條數(shù)據(jù)是和其他li有區(qū)別，時間截取、li超出部分顯示更多按鈕，等等都可下載源碼看看]

小菜3、讓新聞卡片圖片點擊放大
新聞卡片，點擊圖片平滑過渡放大，關(guān)閉縮小

上菜：

場景需求：其實就是一個查看點擊查看大圖插件

原理：通過transform:屬性scale實現(xiàn)圖片縮放，其中圖片是兩張圖小大圖切換，目前只是實現(xiàn)了功能，有待優(yōu)化，所以不貼代碼了（完整代碼，本文后github鏈接）

小菜4、輪播圖

輪播圖，現(xiàn)在基于vue的開源的很多優(yōu)秀的輪播圖插件,比如vue-awesome-swiper，這個功能就不多講， 這邊的話我自己寫的：1、支持瀏覽器任意放縮，兼容移動端，2、支持自動切換，鼠標經(jīng)過停止切換，分頁/任意頁點擊切換，左右切換，3、支持文字介紹（超過一行自動省略）

上菜：

值得一提的是：如果加載輪播圖組件（其他組件有這種報錯可能）在加載的過程中出現(xiàn)“Error in render: "TypeError: Cannot read property "url" of undefined"

這是由于axios請求和組件渲染順序的問題引起的，這時候，你只需要在axios請求到數(shù)據(jù)后，再去加載組件，這里我推薦用v-if，判斷當數(shù)據(jù)的長度大于0，表示請求出來了數(shù)據(jù)，再去加載輪播組件，如此就不會報錯了。

對應(yīng)輪播組件，感興趣的同學可以看我之前發(fā)的文章《從開發(fā)到發(fā)布一款基于Vue2x的響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow》

小菜5、即時檢索

上菜：

場景需求：通過輸入即時檢索列表里面的內(nèi)容，列表的檢索過濾（完整代碼，本文后github鏈接）

原理：通過computed計算input框的內(nèi)容，然后再展示內(nèi)容

最后：（未完待續(xù)）

因為前一份工作的關(guān)系，做的項目大多數(shù)都是門戶網(wǎng)站項目，最近提了離職，偷閑現(xiàn)在這是階段，總結(jié)了這兩年來的一些前端經(jīng)驗和一些小技巧，也有參考踏得網(wǎng)一些資源。 本來是想著寫一個基于Vue的門戶網(wǎng)站UI組件的，后來覺得寫UI范圍太大，就分享一些通用的vue在前端頁面交互上一些小技巧吧，目前由于時間和工作關(guān)系，暫時更新比較慢，當然目前這個項目里還有其他的一些小組件，比如返回頂部、github小掛件....，當然這些所謂“騷氣”的頁面效果，在性能上和實用性上沒有做過多的測試，包括文章寫的倉促，描述有誤之處，謝謝大家指正，后續(xù)會持續(xù)更新和優(yōu)化，分享一些新的有趣的小組件小東西，都會發(fā)布更新在這篇文章和vue-portal-webUI（github源碼）上，可下載體驗，也期待大家的交流....

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108235.html

相關(guān)文章

  • 2017前端現(xiàn)狀--答題救不了前端新人

    摘要：眾所周知，前端近幾年鬧了一場革命。這些問題反應(yīng)了什么現(xiàn)象確實前端很火，引來了一批批新人。前端小白們?nèi)缁鹑巛钡膶W習著現(xiàn)在前端流行的新技術(shù)棧。寫在最后所以啊，在目睹了很多白癡問題后，我終于發(fā)出了一聲吶喊，答題救不了前端新人。 眾所周知，前端近幾年鬧了一場革命。前端在編程領(lǐng)域也掀起了學習潮。至少在中國，從2013年下半年至今，在搜索指數(shù)上，有著爆炸式的增長。可以看下數(shù)據(jù)：百度指數(shù)，Googl...

    jone5679 評論0 收藏0

  • 2017前端現(xiàn)狀--答題救不了前端新人

    摘要：眾所周知，前端近幾年鬧了一場革命。這些問題反應(yīng)了什么現(xiàn)象確實前端很火，引來了一批批新人。前端小白們?nèi)缁鹑巛钡膶W習著現(xiàn)在前端流行的新技術(shù)棧。寫在最后所以啊，在目睹了很多白癡問題后，我終于發(fā)出了一聲吶喊，答題救不了前端新人。 眾所周知，前端近幾年鬧了一場革命。前端在編程領(lǐng)域也掀起了學習潮。至少在中國，從2013年下半年至今，在搜索指數(shù)上，有著爆炸式的增長?？梢钥聪聰?shù)據(jù)：百度指數(shù)，Googl...

    alogy 評論0 收藏0

  • 最近想通的幾個單頁面應(yīng)用開發(fā)的重點

    摘要：老實說我不是第一次想歪了而且很慢總是不能很快抓住要點當別人用后端從做博客做論壇聯(lián)系完成的應(yīng)用的時候我跑去學單頁面應(yīng)用還很久掙扎在的思路當中我想說的是走大多數(shù)人走的路的確是可以減少浪費的時間和錯誤的走少數(shù)人在的路當然也刺激的我最近才明白原來前 老實說我不是第一次想歪了, 而且很慢, 總是不能很快抓住要點. 當別人用后端 MVC 從做博客做論壇, 聯(lián)系完成 MVC 的應(yīng)用的時候 我跑去學單...

    yibinnn 評論0 收藏0

  • 前端入坑指南

    摘要：作為自學兩年的初級前端，希望對那些想入門前端開發(fā)的人分享一些觀點。尤其是這幾年前端領(lǐng)域飛速的發(fā)展，新東西層出不窮?；蛘哧P(guān)注下我的微信公眾號前端獲取每天分享前端入門知識。為什么選擇前端 做一件事之前最好問問自己為什么要做，然后再去思考該怎么做。如果只是看到別人做了，并且有很不錯的收入，然后自己就決定做了，很可能中途放棄浪費掉很多時間。起碼問自己一個問題：我是否真的熱愛這個領(lǐng)域，并且很樂意在這個...

    junnplus 評論0 收藏0

  • 前端vue系列-起始篇 vue的基本認知

    摘要：管理后臺，日常就是提交各種表單了，這部分現(xiàn)有的方案，比如表單提交或者收集信息提交。，可以用于前端開發(fā)的工程構(gòu)建。帶了人的前端團隊，你的精力開始在配合公司其他部門做用戶數(shù)據(jù)增長了。開始考慮使用的。? ? ? ?hi,大家伙，我是佛系大大，很高興與你們一起溝通，學習，進步。 ? ? ? ?很久不更新博客了，現(xiàn)在回來再寫博客，盡然是有些懷念的感覺，幸福的感覺。因為寫博客，內(nèi)心會很寧靜，沉浸在自己的...

    I_Am 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<