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