用vue寫一個(gè)簡(jiǎn)單的segmentfault app界面

maxmin 發(fā)布于2019-08-20 16:34 / 3223人閱讀

摘要：看也看了不少時(shí)間了，只是一直沒動(dòng)過(guò)手寫過(guò)項(xiàng)目，這兩天正好閑著，就用練手寫了個(gè)簡(jiǎn)單的的界面，功能上實(shí)現(xiàn)得還比較少，只把最外面一層的路由和數(shù)據(jù)展示寫了，內(nèi)層文章頁(yè)面和問(wèn)答之類的暫時(shí)還沒弄。數(shù)據(jù)是靜態(tài)的，放在里面。

看vue也看了不少時(shí)間了，只是一直沒動(dòng)過(guò)手寫過(guò)項(xiàng)目，這兩天正好閑著，就用vue練手寫了個(gè)簡(jiǎn)單的segmentfault app的界面，功能上實(shí)現(xiàn)得還比較少，只把最外面一層的路由和數(shù)據(jù)展示寫了，內(nèi)層文章頁(yè)面和問(wèn)答之類的暫時(shí)還沒弄。數(shù)據(jù)是靜態(tài)的，放在/program/data.js里面。

這個(gè)東西最大的麻煩點(diǎn)是嵌套路由，底部的tab bar和頂部的navigation bar還有中間的展示頁(yè)面是層層嵌套的，理解了這個(gè)之后其實(shí)其它的就不難了。

還有就是transition，沒法做到完全像app里面的那樣，點(diǎn)擊tab bar兩個(gè)頁(yè)面同時(shí)開始透明-顯示或者顯示-透明的轉(zhuǎn)換，只能是一個(gè)頁(yè)面動(dòng)畫進(jìn)行完了，另一個(gè)才開始；而且中間的展示頁(yè)面因?yàn)槭菑?fù)用組件，復(fù)用組件的話好像是不執(zhí)行動(dòng)畫？這點(diǎn)我還沒仔細(xì)研究文檔。。。太懶了。。。

東西放在github上，地址是vue-segmentfault,里面的segmentfault文件夾上執(zhí)行

npm install 
npm run dev

即可，最好是在手機(jī)模式下瀏覽，直接用ngrok

ngrok http 8080

就能看到地址了，然后手機(jī)打開地址就可以了，歡迎提issue和star。

云服務(wù)器 GPU云服務(wù)器用jsp做一個(gè)界面的用python寫界面用html寫登入界面用c語(yǔ)言寫簡(jiǎn)單計(jì)算器

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83007.html

相關(guān)文章

應(yīng)用vue2+vuex+vue-router+webpack2+es6+express+mysql技

摘要：其實(shí)這里還是有漏洞的，坐等高手指出來(lái)微笑臉后臺(tái)沒有用生成一個(gè)完整的架構(gòu)。來(lái)自不同視圖的行為需要變更同一狀態(tài)。最近對(duì)vue很感興趣，趁閑暇時(shí)間，模仿了wunderlist里面的部分功能，編寫了前后端分離的基于vue技術(shù)棧和express的todolist小項(xiàng)目。寫這篇博文來(lái)總結(jié)思考下。項(xiàng)目所在github,可以自行參考克隆。本人博客總體概覽整個(gè)項(xiàng)目最終做成的樣子如下： showI...

voidking 2019-08-20 16:09 評(píng)論0 收藏0
VUE知識(shí)點(diǎn)集錦

摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

Tecode 2019-08-23 16:02 評(píng)論0 收藏0
VUE知識(shí)點(diǎn)集錦

摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

APICloud 2019-08-02 14:34 評(píng)論0 收藏0
vue 2 + vue-router 2 實(shí)現(xiàn)SPA

摘要：標(biāo)簽是展示我們匹配到的組件的區(qū)域。其中可以是通過(guò)創(chuàng)建的組件構(gòu)造器，或者，只是一個(gè)組件配置對(duì)象。縮寫相當(dāng)于創(chuàng)建和掛載根實(shí)例。創(chuàng)建實(shí)例及配置，即。參考文獻(xiàn)官方文檔學(xué)習(xí)筆記構(gòu)建單頁(yè)應(yīng)用最佳實(shí)戰(zhàn)一個(gè)完整的應(yīng)用起手 github項(xiàng)目地址請(qǐng)點(diǎn)這里。使用 Vue.js 時(shí)，我們就已經(jīng)把組件組合成一個(gè)應(yīng)用了，當(dāng)我們要把 vue-router 加進(jìn)來(lái)，只需要配置組件和路由映射，然后告訴 vue-rou...

OBKoro1 2019-08-20 13:38 評(píng)論0 收藏0
2017-06-20 前端日?qǐng)?bào)

摘要：前端日?qǐng)?bào)精選專題之跟著學(xué)節(jié)流冴羽的博客全家桶仿微信項(xiàng)目，支持多人在線聊天和機(jī)器人聊天騰訊前端團(tuán)隊(duì)社區(qū)編碼的奧秘模塊實(shí)現(xiàn)入門淺析知乎專欄前端每周清單發(fā)布新版本提升應(yīng)用性能的方法中文寇可往吾亦可往用實(shí)現(xiàn)對(duì)決支付寶的微信企業(yè)付款到零 2017-06-20 前端日?qǐng)?bào) 精選 JavaScript專題之跟著 underscore 學(xué)節(jié)流 - 冴羽的JavaScript博客 - SegmentFau...

Galence 2019-08-20 17:23 評(píng)論0 收藏0