- 如果你有兩個相鄰的文本位，且希望它們的padding差不多一個空格，那你可以試試1ch品腹。{ padding-left: 1ch }
擴展閱讀 - 你知道vertical-align可以用百分比嗎？如果你發(fā)現vertical-align: super或top不是你想要的那樣，別去加position: relative; top: -3px之類的代碼谎仲，試試看vertical-align: 30%吧。
- input 的寬度一定要注意刨仑，當它寬度低于某個臨界值時候郑诺，它的寬度將停留在這個臨界值，導致有些時候布局麻煩杉武，所以最好給它設置個安全的最小寬度辙诞，比如 min-width: 10px。
- input轻抱，image飞涂，iframe 等不支持偽元素。
- 在 <input> 或 <textarea> 可以使用 oninput 事件祈搜，它在元素的值發(fā)生變化時立即觸發(fā)较店，而 onchange 在元素失去焦點時觸發(fā)。另一點容燕，onchange 事件也可作用于 <keygen> 和 <select> 元素梁呈。
- 如果你需要在組件中使用 setInterval 或者 setTimeout，那你需要這樣調用蘸秘。 擴展閱讀
compnentDidMount() {
this._timeoutId = setTimeout( this.doFutureStuff, 1000 );
this._intervalId = setInterval( this.doStuffRepeatedly, 5000 );
}
componentWillUnmount() {
clearTimeout( this._timeoutId );
clearInterval( this._intervalId );
}
- 如果你需要使用
requestAnimationFrame()執(zhí)行一個動畫循環(huán)
// How to ensure that our animation loop ends on component unount
componentDidMount() {
this.startLoop();
}
componentWillUnmount() {
this.stopLoop();
}
startLoop() {
if( !this._frameId ) {
this._frameId = window.requestAnimationFrame( this.loop );
}
}
loop() {
// perform loop work here
this.theoreticalComponentAnimationFunction()
// Set up next iteration of the loop
this.frameId = window.requestAnimationFrame( this.loop )
}
stopLoop() {
window.cancelAnimationFrame( this._frameId );
// Note: no need to worry if the loop has already been cancelled
// cancelAnimationFrame() won't throw an error
}
- 媒體查詢
@media screen and (max-width: 500px) and (min-resolution: 2dppx) {
.yourLayout {
width:100%;
}
}
- 圖片加載新方式
537f5932ly1ffrotx8adqj21kw162gxx.jpg
- 獲取元素尺寸知多少
- 關于數字
// 無效語法：
42.toFixed( 3 ); // SyntaxError
// 下面的語法都有效：
(42).toFixed( 3 ); // "42.000"
0.42.toFixed( 3 ); // "0.420"
42..toFixed( 3 ); // "42.000"
42 .toFixed(3); // "42.000"
- 簡單值總是通過值賦值的方式來賦值（null, undefined, string, number, bool, symbol )官卡，復合值總是通過引用復制的方式來賦值。
var a = 1;
b = a;
b++
a // 1
b // 2
var arr = [1, 2, 3]
brr = arr
arr.push(4)
arr // [1, 2, 3, 4]
brr // [1, 2, 3, 4]
- 常用的返回毫秒數
+ new Date()
更優(yōu)雅的方式
(new Date()).getTime()
Date.now()
- 數組的一些處理
CallApi(`/message/${id}`, null, 'DELETE').then(r => {
if (r.code === 'SUCCESS') {
let index = this.state.messages.findIndex(i => i.id == id);
// 快速復制一個新數組
let newArr = [...this.state.messages];
newArr.splice(index, 1);
this.setState(s => ({messages: newArr}))
} else {
r.msg && Toast.info(r.msg)
}
});
// 解構醋虏，如果需要改變變量名
let { message: newMessage } = this.state
- 對價格數組進行去0操作寻咒，最多保留兩位數
function myNum(s) {
var s1 = +s;
if(!s1) return 0;
var s2 = s1.toFixed(2) ;
if(s2.substr(-1) !== '0'){
return s2
} else if(s2.substr(-2,1) !== '0' && s2.substr(-1) === '0'){
return s1.toFixed(1)
} else {return s1.toFixed(0)}
}
- 正則匹配
'font-size:20px'.replace(/:\s*(\d+)px/g, (a,b)=>{
return `:${b*0.02}rem`
})
- 如何寫一個類似antd Toast 的組件
import React from 'react';
import {render} from "react-dom";
import {Toast} from 'react-weui';
class ToastContainer extends React.PureComponent {
state={show: true};
componentDidMount() {
const {timer, cb} = this.props;
setTimeout(() => {this.setState({show: false}); cb && cb()}, timer*1000)
}
render() {
const {type, content} = this.props;
const {show} = this.state;
return (
show && <Toast icon={type} show={true}>{content}</Toast>
)
}
}
function hide() {
render(<div />, document.getElementById('toast'))
}
function notice(content, timer, cb, type) {
hide();
const root = React.createElement(ToastContainer, {content, timer, cb, type});
render(root, document.getElementById('toast'))
}
export default {
success: (content, timer=3, cb) => notice(content, timer, cb, 'success-no-circle'),
fail: (content, timer=3, cb) => notice(content, timer, cb, 'cancel'),
info: (content, timer=3, cb) => notice(content, timer, cb, 'info-circle'),
loading: (content, timer=3, cb) => notice(content, timer, cb, 'loading'),
hide: () => hide()
};
- 微信頁面，長按會彈出系統(tǒng)菜單如何解決颈嚼？
有一個按鈕毛秘，用戶需要長按它說話，但是顯示在微信里面的網頁粘舟，長按會出現復制的菜單熔脂，造成用戶體驗不流暢。
如何解決呢柑肴？
- 首先為按鈕添加樣式
user-select:none - 其次在按鈕的 onTouchStart 事件上這樣組織代碼
onTouchStart = e => {
e.preventDefault();
setTimeout(() => { 你的核心代碼 }, 0)
}
