mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Merge pull request #1835 from ddcat1115/fix-1777
fix #1777 add onChange for Affix
This commit is contained in:
commit
a940547aff
21
components/affix/demo/on-change.md
Normal file
21
components/affix/demo/on-change.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
order: 3
|
||||
title: 固定状态改变的回调
|
||||
---
|
||||
|
||||
可以获得是否固定的状态。
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
|
||||
const onChange = function (affixed) {
|
||||
console.log(affixed); // true or false
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Affix offsetTop={120} onChange={onChange}>
|
||||
<Button>固定在距离顶部 120px 的位置</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
@ -39,6 +39,10 @@ export default class Affix extends React.Component {
|
||||
offsetBottom: React.PropTypes.number,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
onChange() {},
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@ -51,7 +55,6 @@ export default class Affix extends React.Component {
|
||||
|
||||
// Backwards support
|
||||
offsetTop = offsetTop || offset;
|
||||
|
||||
const scrollTop = getScroll(window, true);
|
||||
const elemOffset = getOffset(ReactDOM.findDOMNode(this));
|
||||
const elemSize = {
|
||||
@ -78,7 +81,7 @@ export default class Affix extends React.Component {
|
||||
left: elemOffset.left,
|
||||
width: ReactDOM.findDOMNode(this).offsetWidth,
|
||||
},
|
||||
});
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
} else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
|
||||
offsetMode.bottom) {
|
||||
@ -91,12 +94,12 @@ export default class Affix extends React.Component {
|
||||
left: elemOffset.left,
|
||||
width: ReactDOM.findDOMNode(this).offsetWidth,
|
||||
},
|
||||
});
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
} else if (this.state.affixStyle) {
|
||||
this.setState({
|
||||
affixStyle: null,
|
||||
});
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -20,3 +20,4 @@ english: Affix
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
|
||||
| onChange | 固定状态改变时触发的回调函数 | Function | 无 |
|
||||
|
Loading…
Reference in New Issue
Block a user