原创 數組遍歷區分父子級重排遍歷多維數組

背景:在開發實戰中,後臺傳給前臺的數據是一個數組,數組根據id和pId一一對應具有父子級關係, 如:第一個對象 a.id='1' ;a.pid='0'; 第二個對象 b.id='5'; b.pid='1'; 第三個對象 c.id='7';

原创 關鍵幀動畫,摺疊面板(parseFloat,requestAnimationFrame,cancelAnimationFrame)

當前項目是在react項目中的,所以本案例代碼改變數據申明和數據更改都是react的方式  效果圖如下:  首先聲明幾個變量   constructor(props) { // 變量申明 super(props);

原创 web前端 H5 百度地圖API 案列

思路: 1 先右鍵開啓可以收集的功能 2 雙擊地圖 添加經緯度到數組 3 添加到10個 關閉收集的功能 4 地址收集完成後再地圖上顯示這是個地標(圖標) 5 創建一個信息窗口的對象 6 單擊圖標顯示位置信

原创 webpack(process.env.NODE_ENV)build打包自動區分環境

webpack每次打包都要切換地址(很煩) 前端項目在每次打包的時候都要求切換後臺地址,如果有哪次忘記了切換地址就打包的,發到線上就報錯了,又要修改地址後再打包。雖然這不是什麼難事,就花費時間而已,但是作爲一名合格的碼農,就是要遵循偷懶原

原创 file 獲取本地文件路徑(圖片)

 代碼直接用就可以了,當然請注意瀏覽器版本 //傳入file文件 getObjectURL(file) { let url = null; if (window.createObjcect

原创 guid 生成

          全局唯一標識分區表(GUID Partition Table,縮寫:GPT)是指全局唯一標示磁盤分區表格式。它是可擴展固件接口(EFI)標準(被Intel用於替代個人計算機的BIOS)的一部分,被用於替代BIOS系統中

原创 數據庫 webSQL使用方法

webSQL 是一個操作數據庫的對象 裏面封裝了操作數據庫的方法 是通過sql語句操作數據庫的(創建數據庫、建表、增刪改查) Sql語句?是一個可以操作數據庫的字符串 類似正則的規則 他不會自己執行,需要各個平臺單獨操作數據

原创 應用緩存(Application Cache)

應用緩存是在移動設備沒有網絡的情況下。不出現404報錯,並且可以基本使用。 使用步驟: 1.需要有一個引用緩存文件,.manifest爲尾綴的文件 a)是用於配製需要配製的緩存的文件 b )在不同情況下緩存的內容 2.在

原创 基於vue2.0版本的手機端mint-ui 的Loadmore上拉刷新下拉加載的方法,對於初學者來說很有幫助,開始寫走了很多彎路,網上找到這個方法,簡單實用,不多說看代碼……

<template>    <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">      <v-loadmore :top-method=

原创 Html5中數據存儲的方式

1.Storage 2.webSQL 數據庫操作 3.Indexeddb 數據庫操作 在HTML5本地存儲中,Web SQL Database實際上已經被廢棄,而HTML5的支持的本地存儲實際上變成了Web Stor

原创 全選,取消,單選拼接ID

 本案例是在react項目實戰中使用的,需求是把選中的列表項的id以“,”號拼接作爲參數,修改狀態。後臺給的是數據列表,並沒有可供是否選中的參數作爲判斷依據。這就需要前端多相關的數據處理。   案例分析 1,首先需要對後臺數據保存本地,遍

原创 數組{對象}去重 [ {},{},{}]

先看實例的原數組;  //原數組對象 [ {name: "NBA美國職業籃球聯賽", matchScreen: true}, {name: "NBA美國職業籃球聯賽", matchScreen: true}, {

原创 H5 百度地圖API 將當前位置信息顯示出來

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>百度地圖顯示地圖信息</tit

原创 滾動條樣式

.scrollBarStyle { &::-webkit-scrollbar { /*滾動條整體樣式*/ width: 10px; /*高寬分別對應橫豎滾動條的尺寸*/

原创 H5 定位

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body></body> </html> js代碼 //獲取當前定位 navigat