Merge branch '1.x-stable'
afc163
9 years ago
commit
2ffa087aa1
@ -0,0 +1,17 @@
|
||||
---
|
||||
order: 0
|
||||
title: 基本
|
||||
---
|
||||
|
||||
最简单的用法。
|
||||
|
||||
````jsx
|
||||
import { BackTop } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<BackTop />
|
||||
向下滚动后，见右下角灰色按钮
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
@ -0,0 +1,30 @@
|
||||
---
|
||||
order: 1
|
||||
title: 自定义样式
|
||||
---
|
||||
|
||||
可以自定义置顶按钮的样式，限制宽高：`40px * 40px`。
|
||||
|
||||
````jsx
|
||||
import { BackTop } from 'antd';
|
||||
|
||||
const style = {
|
||||
height: 40,
|
||||
width: 40,
|
||||
lineHeight: '40px',
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#57c5f7',
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
fontSize: 20,
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<BackTop style={{ bottom: 100 }}>
|
||||
<div style={style}>UP</div>
|
||||
</BackTop>
|
||||
向下滚动后，见右下角蓝色按钮
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
@ -0,0 +1,109 @@
|
||||
import React from 'react';
|
||||
import Animate from 'rc-animate';
|
||||
import Icon from '../icon';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import classNames from 'classnames';
|
||||
|
||||
function getScroll(w, top) {
|
||||
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
|
||||
const method = `scroll${top ? 'Top' : 'Left'}`;
|
||||
if (typeof ret !== 'number') {
|
||||
const d = w.document;
|
||||
// ie6,7,8 standard mode
|
||||
ret = d.documentElement[method];
|
||||
if (typeof ret !== 'number') {
|
||||
// quirks mode
|
||||
ret = d.body[method];
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
export default class BackTop extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
visibilityHeight: React.PropTypes.number,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
onClick() {},
|
||||
visibilityHeight: 400,
|
||||
prefixCls: 'ant-back-top',
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const scrollTop = getScroll(window, true);
|
||||
this.state = {
|
||||
visible: scrollTop > this.props.visibilityHeight,
|
||||
};
|
||||
}
|
||||
|
||||
scrollToTop = (e) => {
|
||||
if (e) e.preventDefault();
|
||||
this.setScrollTop(0);
|
||||
this.props.onClick(e);
|
||||
}
|
||||
|
||||
setScrollTop(value) {
|
||||
document.body.scrollTop = value;
|
||||
document.documentElement.scrollTop = value;
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
const scrollTop = getScroll(window, true);
|
||||
this.setState({
|
||||
visible: scrollTop > this.props.visibilityHeight,
|
||||
});
|
||||
}
|
||||
|
||||
animationEnd = () => {
|
||||
const scrollTop = getScroll(window, true);
|
||||
this.setState({
|
||||
visible: scrollTop > this.props.visibilityHeight,
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls, className, children, ...restProps } = this.props;
|
||||
const classString = classNames({
|
||||
[prefixCls]: true,
|
||||
[className]: !!className,
|
||||
});
|
||||
|
||||
const defaultElement = (
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<Icon className={`${prefixCls}-icon`} type="to-top" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const style = {
|
||||
display: this.state.visible ? 'block' : 'none',
|
||||
};
|
||||
|
||||
return (
|
||||
<Animate
|
||||
showProp="data-show"
|
||||
transitionName="fade"
|
||||
onEnd={this.animationEnd}
|
||||
transitionAppear
|
||||
>
|
||||
<div data-show={this.state.visible} style={style}>
|
||||
<div {...restProps} className={classString} onClick={this.scrollToTop}>
|
||||
{children || defaultElement}
|
||||
</div>
|
||||
</div>
|
||||
</Animate>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
category: Components
|
||||
chinese: 置顶
|
||||
type: Other
|
||||
english: BackTop
|
||||
---
|
||||
|
||||
使用置顶组件可以方便地回到页面顶部。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当页面内容区域比较长时；
|
||||
- 当用户需要频繁返回顶部查看相关内容时。
|
||||
|
||||
## API
|
||||
|
||||
> 有默认样式，距离底部 `50px`，可覆盖。
|
||||
> 自定义样式宽高不大于 40px * 40px。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 |
|
||||
| onClick | 点击按钮的回调函数 | Function | - |
|
||||
@ -0,0 +1,2 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
@ -0,0 +1,33 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@backtop-prefix-cls: ant-back-top;
|
||||
|
||||
.@{backtop-prefix-cls} {
|
||||
z-index: @zindex-back-top;
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
bottom: 50px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
&-content {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: rgba(64, 64, 64, 0.4);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
transition: all .3s @ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(64, 64, 64, 0.6);
|
||||
transition: all .3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue