- 如果你有两个相邻的文本位，且希望它们的padding差不多一个空格，那你可以试试1ch。{ padding-left: 1ch }
扩展阅读 - 你知道vertical-align可以用百分比吗？如果你发现vertical-align: super或top不是你想要的那样，别去加position: relative; top: -3px之类的代码，试试看vertical-align: 30%吧。
- input 的宽度一定要注意，当它宽度低于某个临界值时候，它的宽度将停留在这个临界值，导致有些时候布局麻烦，所以最好给它设置个安全的最小宽度，比如 min-width: 10px。
- input，image，iframe 等不支持伪元素。
- 在 <input> 或 <textarea> 可以使用 oninput 事件，它在元素的值发生变化时立即触发，而 onchange 在元素失去焦点时触发。另一点，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()执行一个动画循环
// 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()
更优雅的方式
(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()
};
- 微信页面，长按会弹出系统菜单如何解决？
有一个按钮，用户需要长按它说话，但是显示在微信里面的网页，长按会出现复制的菜单，造成用户体验不流畅。
如何解决呢？
- 首先为按钮添加样式
user-select:none - 其次在按钮的 onTouchStart 事件上这样组织代码
onTouchStart = e => {
e.preventDefault();
setTimeout(() => { 你的核心代码 }, 0)
}
