這里我獻(xiàn)丑,貢獻(xiàn)幾個項目經(jīng)驗寫法的小實例!
作品描述:該項目將一個完整flash劇情動畫還原成一個由JS+CSS3實現(xiàn)的前端動畫。 鏈接:https://dxb123456.github.io/tengxun/ 實現(xiàn)技術(shù):CSS+HTML+JS+H5+CSS3+jqury; 項目難點: 1.定時器的清除 部分動畫效果需要js自動生成,時間的控制使用了timeout和innertal,其中timerout包含了innertal,點擊事件和定時器不在同一個js文件中,快速來回點擊的時候,定時器清除不起作用。 解決方案:將該li對應(yīng)頁的所有定時器綁定在該li身上,每次點擊的時候清除timeout和innertal。 2.帶陰影折線運動處理 對于傾斜的p通過js改變其高度,并且按照數(shù)學(xué)邏輯改變top和left值的情況下,p在運動時候會出現(xiàn)偏移,和抖動。 解決方案:給p一個運動基準(zhǔn)點,這樣p在運動的時候就無需改變top和left值,只需要改變寬度或高度即可。 3.拋物線的運動 css中兩個點運動都是直線運動。 解決方案:給初始點一個旋轉(zhuǎn)角度,這樣看起來就有拋物線的感覺。 4.遮罩層處理 在多層級的html渲染中,中間圖層的遮罩效果無法實現(xiàn)。 解決方案:遮罩層可以在最底層使用,但是中間層級的遮罩效果需要對圖片進(jìn)行處理,改成png圖片,再進(jìn)行css操作。 5.卡頓的處理 在Firefox和ie中,小圖標(biāo)的緩慢移動效果會出現(xiàn)卡頓。 解決方案:給運動時間的時候,判斷如果不是chrome瀏覽器,減小運動時間。 6.性能的優(yōu)化 圖片的使用讓動畫加載的速度變慢,影響用戶體驗。 解決方案:對部分能使用p代替的圖片采用p生成,對代碼,圖片進(jìn)行深度壓縮上傳等。
項目描述:本項目是一款手機(jī)端APP,采用vue框架構(gòu)建,其中涉及swiper觸控滑動模塊,slide子頁之間采用了懶加載技術(shù)保證用戶體驗,iscroll上拉加載下拉刷新模塊,購物車模塊與登錄注冊模塊均采用了本地存儲技術(shù)。 崗位職責(zé):主要負(fù)責(zé)頁面的布局和數(shù)據(jù)渲染,并且配合APP完成頁面的嵌套。 項目架構(gòu): 1.使用vue框架,以及vue-router構(gòu)建單頁面應(yīng)用。 2.項目采用vuex處理各組件間的通訊,vue-resource處理請求,使用mint-ui組件庫中部分功能進(jìn)行快速開發(fā),通過vue-cli 快速搭建開發(fā)環(huán)境。 3.采用手機(jī)淘寶適配方案。 4.使用阿里矢量圖標(biāo)庫。 技術(shù)要求: 運用HTML5語義化標(biāo)簽+CSS3新特性進(jìn)行頁面布局,實現(xiàn)頁面的動態(tài)效果,提高代碼的清 晰度和代碼質(zhì)量,將頁面體現(xiàn)的更加豐滿,代碼更健壯。 運用vue.js開發(fā),采用前后端分離開發(fā)模式。 運用vue.js中的指令和服務(wù)與后臺接口對接,進(jìn)行數(shù)據(jù)交互,進(jìn)行頁面渲染,實現(xiàn)功能 模塊的判斷。 使用JavaScript實現(xiàn)某些功能的邏輯處理和某些頁面的動態(tài)效果。 項目測試階段可以自己用node連接數(shù)據(jù)庫進(jìn)行接口對接和數(shù)據(jù)渲染模擬,測試功能模塊 是否完善,邏輯處理是否正確。 運用swiper框架進(jìn)行部分頁面的設(shè)計。 運用sass進(jìn)行代碼的編寫,運用gulp進(jìn)行代碼的整理和壓縮。
項目描述:本項目是一個促銷商品推薦網(wǎng)站的移動APP,使用vue+webpack構(gòu)建的單頁面應(yīng)用,項目采用了vuex、vue-route、vue-resource以及ES6語法,采用組件化思想搭建整個項目,從而使組件高度復(fù)用,代碼十分簡潔。 崗位職責(zé):主要負(fù)責(zé)項目頁面的布局和數(shù)據(jù)渲染,完成與后端的接口對接,配合后端的對接聯(lián)調(diào),解決不同瀏覽器或者不同手機(jī)端頁面布局錯亂的問題。 項目架構(gòu): 1.使用vue框架,以及vue-router構(gòu)建單頁面應(yīng)用。 2.使用vue+webpack構(gòu)建項目環(huán)境。 3.采用手機(jī)淘寶適配方案。 4.使用阿里矢量圖標(biāo)庫。 技術(shù)要求: 1.項目采用node(express框架)+mysql來搭建后臺服務(wù)器; 2.基于webpack來搭建項目工程,配置第三方插件; 3.使用vue框架,vue-router搭建項目路由,vuex來實現(xiàn)單文件組件和數(shù)據(jù)的抽離 4.使用Swiper實現(xiàn)首頁banner的輪播切換,iscoll結(jié)合ajax實現(xiàn)上拉加載,下拉刷新 5.合理使用鉤子函數(shù),實現(xiàn)數(shù)據(jù)的監(jiān)聽、渲染頁面、頁面節(jié)點的實例化功能。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com