博客 / 列表

洛陽醉長安行 - 【從實戰帶你認識gulp】打包前端項目並實現防緩存

gulp是什麼？ 一個基於node的前端自動化任務構建工具，使用經典回調+鏈式調用的方式實現任務的自動化 (src.pipe(...).pipe)，gulp其實和webpack很相似，但是gulp側重點不同，gulp更側重前端流程自動化、任務執行（通過任務使開發提效），就像一條流水線。而webpack則是更側重用於打包前端資源，一切皆可打包成模塊。 官方文檔：https://www.gulp

gulp , 前端 , Javascript

洛陽醉長安行 - TypeScript + Map實現一個公共數據管理模塊DataMap

在大型中後台項目開發中，尤其是在使用React進行開發時，我們會遇到很多下拉框數據、多選框數據、或者編碼中多處使用到的業務型公共映射表。為了便於維護，可以把這些數據都集中放到一個模塊中，而不是分散的寫在各個地方。 實現思路 我們定義一個IMapExtra接口擴展一下Map實例，建立兩個類MapExtra和DataMap，MapExtra是為了在使用數據時更方便獲取Map類型數據。最後把map（數據

map , typescript , 前端

洛陽醉長安行 - 手摸手教你實現移動端滾動記憶（帶分頁）

前戲： 在移動端網頁中的列表如何實現滾動和搜索條件的記憶，類似微信文章一樣，瀏覽到文章的某一個位置，在下次打開的時候依然能滾動到上次瀏覽的位置繼續瀏覽。本篇文章介紹的是帶分頁的列表，如果你現在需求是不帶分頁的文章或列表當然也可以參考，實現方式基本是差不多的。 因為這裏使用了mui的下拉刷新的列表組件，要在tab切換時需要默認把滾動條重置到最頂部（從頭開始瀏覽），refreshContainer為對

移動端 , mui , 前端 , html5 , Javascript

洛陽醉長安行 - 移動端級聯組件mCascader

移動端開發中可能會涉及到樹狀數據的選擇，由於mui中沒有比較好的組件可以使用，所以我基於mui和jq開發了一款可以在移動端操作級聯的氣泡組件。 源碼地址：https://github.com/booms21/mC... mCascader mCascader 是一款mui風格的移動端h5氣泡級聯框，支持可選擇任意層級、默認值、分隔符 使用方法： 首先引入mui和jq庫，mCascader.

移動端 , mui , html5

洛陽醉長安行 - 移動端過濾欄Tab組件mFilterToolbar

移動端開發中由於mui中沒有比較好用的tab組件，所以我就基於mui開發了一個tab列表組件，可以獲取當前的tab並且增加了排序功能，解決了列表的常見需求 源碼地址：https://github.com/booms21/mF... mFilterToolbar mFilterToolbar 是一款mui風格的移動端h5頂部過濾欄組件，可根據自定義的條件對列表進行過濾，支持排序、組件默認值、組

移動端 , mui

洛陽醉長安行 - 移動端MUI重寫alert優化提示框樣式及頁面加載動畫

問題場景1： 在移動端h5的開發中，因為前期開發使用了是原生的alert來提示，會有在不同機型樣式不統一，還會出現在彈窗標題出現網址的問題，顯示非常不友好，在mui項目中可以直接使用mui的alert組件實現消息提示來解決這個問題。但是因為長期下來alert的地方太多，改動量大，有沒有什麼一勞永逸的辦法。 解決方法： 直接重寫瀏覽器window下的alert函數 window.alert = fu

移動端 , mui , 前端

洛陽醉長安行 - mui 多個tab頁實現下拉刷新上拉加載

下拉刷新組件的dom結構 div id="refreshContainer" class="mui-scroll-wrapper" div id="refreshBox" div class="active" id="tab1"/div div id="tab2"/div div id="tab3"/div /div /di

移動端 , Css , mui , 前端 , html5

洛陽醉長安行 - mui 側欄菜單實現多級樹數據列表，返回上一級樹

想在移動端使用樹結構選擇項目，但是在移動端顯示體驗太差怎麼辦？使用棧結構存儲樹歷史，使用類似側欄菜單的方式實現： var currtTreeArr = []; //當前樹列表數組 var treeData = []; //根節點數據 var treeHistoryArr = []; //歷史打開的樹，用於回退，進入到其他節點 $(".mui-table-view").on("click", ".m

移動端 , 樹形結構 , mui , 前端 , Javascript

洛陽醉長安行 - js 使用遞歸上傳文件（批量上傳文件）、上傳進度

當接口不支持批量上傳，使用遞歸實現單文件上傳，配合mui.loading實現上傳進度 var imgAppendixArr = [];//當前已上傳的圖片信息數組，可傳遞給後端 //多張圖片遞歸上傳 function uploadList(obj, i) { var fileList = $("#" + obj.inputId)[0].files; var i = i || 0;//初始為

移動端 , mui , 前端 , Javascript

洛陽醉長安行 - mui 移動端側邊欄菜單組件導致頁面無法滾動問題

無法滾動設置如下css能解決 .mui-scroll-wrapper{ overflow: auto !important; } 如點擊外面遮罩層關閉不了側欄，需要添加一個div class="mui-off-canvas-backdrop"/div在同級就能解決 !-- 側欄內容-- div class="mui-content mui-scroll-wrapper" ... /d

移動端 , Css , mui , 前端 , html5