-webkit-overflow-scrolling: touch; ios 滾動css
判斷微信瀏覽器 micromessengerhtml
背景不滾動前端
watch: { picker3(){ if(this.picker3){ document.querySelector('body').style.position='fixed' document.querySelector('body').style.width='100%' }else{ document.querySelector('body').style.position='initial' document.querySelector('body').style.width='auto' } } },
requestAnimationFrame 替換setTimeout 不須要設置時間間隔node
<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div> <button id="btn">run</button> <script> var timer; btn.onclick = function(){ myDiv.style.width = '0'; cancelAnimationFrame(timer); timer = requestAnimationFrame(function fn(){ if(parseInt(myDiv.style.width) < 500){ myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px'; myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%'; timer = requestAnimationFrame(fn); }else{ cancelAnimationFrame(timer); } }); } </script>
默認 Content-Type: text/plain;charset=UTF-8jquery
form表單: application/x-www-form-urlencoded
文件類型: multipart/form-data
最新json: application/jsonios
默認: application/x-www-form-urlencoded 文件類型: multipart/form-data 最新json: application/json 當action爲post時候,瀏覽器把form數據封裝到http body中,而後發送到server。 若是沒有type=file的控件,用默認的application/x-www-form-urlencoded就能夠了。 可是若是有type=file的話,就要用到multipart/form-data了。 application/x-www-form-urlencoded方式是Jquery的Ajax請求默認方式,這種方式的好處就是瀏覽器都支持,在請求發送過程當中會對數據進行序列化處理,以鍵值對形式?key1=value1&key2=value2的方式發送到服務器,若是用Jquery,它內部已經進行了處理,若是本身寫原生的Ajax請求,就須要本身對數據進行序列化。 application/json,隨着json規範的愈來愈流行,而且瀏覽器支持程度原來越好,許多開發人員易application/json做爲請求content-type,告訴服務器請求的主題內容是json格式的字符串,服務器端會對json字符串進行解析,這種方式的好處就是前端人員不須要關心數據結構的複雜度,只要是標準的json格式就能提交成功,application/json數據格式愈來愈獲得開發人員的青睞。 當以application/json的content-type傳送數據,被傳送的對象只需被json序列化。當以application/x-www-form-urlencoded的方式傳送數據。請求的內容須要以..=..&..=..的格式提交,在請求體內內容將會以」&」和「 = 」進行拆分。
原生 ajax post 異步 es6
/* * obj: 接口參數對象 * obj={ AppId: "", UserId: "", } * */ function ajax (obj) { let URL='' let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { // 請求成功 console.log(xmlhttp.responseText); } } xmlhttp.open("post", URL+ 'api/xxx', true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 設置請求頭 xmlhttp.send("res=" + JSON.stringify(obj)); }
jq.ajax postweb
test2 () { let obj = { AppId: "", UserId: "" } $.ajax({ type: 'post', url: 'xxx', data: { res: JSON.stringify(obj) }, contentType: "application/x-www-form-urlencoded", success: function (res) { console.log(res); }, failure: function (err) { console.log(err); } }) },
axios ajax
export function test3 (obj) { axios({ method: 'post', url: URL + 'xxx', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: qs.stringify({res: JSON.stringify(obj)}), timeout: TIMEOUT, }).then((res) => { console.log(res.data); }).catch() }
es6 findIndex // 返回數組對象的索引npm
find // 返回對象
filter // 返回數組對象
test(){ let obj =[ {name:'kang',id:'aaa'}, {name:'jia',id:'bbb'}, {name:'wo',id:'ccc'}, ] let id = 'bbb' // findIndex 返回索引 let res = obj.findIndex(res=>{ return res.id===id }) // find 返回對象 let arr = obj.find(res=>{ return res.id===id }) // filter 返回數組對象 let arr2 = obj.filter(res=>{ return res.id===id }) console.log(res); console.log(arr); console.log(arr2); },
exif.js ios 拍照圖片旋轉問題
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
ajax option請求
ajax option 請求 預請求:preflighted request在發送真正的請求前, 會先發送一個方法爲OPTIONS,用於試探服務端是否能接受真正的請求, 若是options得到的迴應是拒絕性質的,好比404\403\500等http狀態,就會中止post、put等請求的發出。
什麼狀況下請求會變成preflighted request? 一、請求方法不是GET/HEAD/POST 二、POST請求的Content-Type並不是application/x-www-form-urlencoded, multipart/form-data, 或text/plain 3、請求設置了自定義的header字段 實踐版:直接請求 nodejs post請求默認 Content-Type: application/json; charset=utf-8 .net 分享積分計算 設置 Content-Type爲 application/x-www-form-urlencoded
flex佈局,overflow-x:auto 超出滾動
<template> <div style="display:flex;overflow-x: auto;"> <div> <div class="aa">彈性佈局加個div就能夠超出滾動。。。外面套一層就能夠指定寬度,而不被flex壓縮</div> </div> <div> <div class="aa">dddd</div> </div> <div> <div class="aa">dddd</div> </div> <div> <div class="aa">dddd</div> </div> </div> </template> <style lang="less" scoped> .aa { width: 200px; height: 200px; background: red; margin-right: 10px; } </style>
背景屬性
bgCanvas.style.backgroundImage = "url(" + this.previewImg + ")" background-size: cover; 寬度100% 高度可能超出背景區域顯示不了 background-size: contain; 高度100% 寬度可能不夠
監聽頁面隱藏, 切換選項卡 或者小化 document.addEventListener("visibilitychange", function() { console.log( document.hidden ); // Modify behavior... });
md5
npm js-md5 https://www.npmjs.com/package/js-md5
引jq 把jq.js 放 項目中
import $ from '../../static/jquery.min'
無縫輪播 移動子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>111</title> </head> <body> <style> ul { height: 30px; overflow: hidden; } li { line-height: 30px; list-style: none; } </style> <ul></ul> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> let arr = [1, 2, 3, 4, 5, 6, 7, 8] init(arr) function init (arr) { // 顯示數據 arr.forEach(val => { $('ul').append('<li>' + val + '</li>') }) } function move (arr) { let val = 0 let $li = $('ul li') let height = $li.height() let interval = setInterval(() => { val = val - 2 $li.eq(0).css('marginTop', val) // 第一行往上移 if (val === -height) { let value = arr.shift() arr.push(value) // 更新數組 $li.eq(0).remove() // 刪除第一個 // 刪除第一行 $('ul').append('<li>' + value + '</li>') // 追加最後一行 window.clearInterval(interval) } }, 20) } let timer = null; timer=setInterval(() => { move(arr) }, 3000) // 若是 /** * 完美解決setInterval在瀏覽器切換時加速的問題 * https://juejin.im/post/5b30a4a451882574ba421b68 * 只要頁面發生變化,無論是切換到其餘的頁面仍是把瀏覽器縮小,會觸發 * document.onvisibilitychange 事件, * document.hidden 這個是指當頁面不是當前頁面時爲true,不然爲false */ document.onvisibilitychange=function(){ if(document.hidden){ window.clearInterval(timer) }else{ timer=setInterval(()=>{ move(arr) },3000) } console.log("hidden"+":"+document.hidden); console.log("visibilityState"+":"+document.visibilityState); } </script> </body> </html>
總體彈性佈局
<div ref="flexBody" class="flex-style"> <div> 把其餘內容都用div包起來 <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div> <div class="flex-content">這是彈性佈局</div> <div>底部tabBar等</div> </div> // 總體彈性佈局(上中下佈局) .flex-style { display: flex; flex-direction: column; .flex-content { flex: 1; overflow-y: scroll; -webkit-overflow-scrolling: touch; // 滾動不卡 } } function flexHeight () { let clientHeight2 = document.documentElement.clientHeight this.$refs.flexBody.style.height = clientHeight2 + 'px' }