1:页面中的元素显示或者隐藏会触发页面的滚动监听事件。
.parent {
height: 100%;
overflow: scroll;
}
.child {
background-color: red;
height: 1000px;
}
.load {
width: 100%;
height: 50px;
background-color: #f0f;
}
<div class="parent">
<div class="child"></div>
<p class="load">加载更多。。。</p>
</div>
<script>
setInterval(function() {
$('.load').toggle();
}, 200);
var scrollStopf = function(contain) {
evt = new CustomEvent('scrollStop', {
bubbles: true,
cancelable: true
});
contain.dispatchEvent(evt);
};
window.addEventListener('scrollStop',function(){
console.log(123);
});
window.addEventListener('scroll', function(e){
scrollStopf(this);
});
</script>
2:在ios手机上点击链接时会出现半透明的灰色背景
将下面的属性的透明度置成0即可,因为在ios上该属性有一个默认值。
-webkit-tap-hightlight-color:rgba(0, 0, 0, 0);
3:
子元素定义的margin不能把父元素的高度撑起来,这个时候可以用BFC解决。
4:React.cloneElement
React.cloneElement用来克隆ReactElement,返回一个新的元素。
以下用法是等价的:
React.cloneElement(
element,
props,
children
);
<element.type {...element.props} {...props}>{children}</element.type>
5:React.children
React.Children提供了一些工具函数来处理this.props.children。
包括:React.Children.map React.Children.forEach React.Children.count React.Children.only React.Children.toArray
7:
this.props.children是组件props的隐藏属性,它的值是一个数组,
数组元素为ReactElement。
8:禁用package-lock.json
在.npmrc文件中配置
package-lock=false