antd-mobile PullToRefresh 小米手机自带浏览器无法上拉
import { PullToRefresh, Button } from 'antd-mobile';
import React from 'react'
import ReactDOM from 'react-dom'
function genData() {
const dataArr = [];
for (let i = 0; i < 20; i++) {
dataArr.push(i);
}
return dataArr;
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
down: true,
height: document.documentElement.clientHeight-80,
data: [],
};
}
componentDidMount() {
const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop;
setTimeout(() => this.setState({
height: hei,
data: genData(),
}), 0);
}
render() {
return (<div>
<Button
style={{ marginBottom: 15 }}
onClick={() => this.setState({ down: !this.state.down })}
>
direction: {this.state.down ? 'down' : 'up'}
</Button>
<PullToRefresh
damping={60}
ref={el => this.ptr = el}
style={{
height: this.state.height,
overflow: 'auto',
}}
indicator={this.state.down ? {} : { deactivate: '上拉可以刷新' }}
direction={this.state.down ? 'down' : 'up'}
refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({ refreshing: true });
setTimeout(() => {
this.setState({ refreshing: false });
}, 1000);
}}
>
{this.state.data.map(i => (
<div key={i} style={{ textAlign: 'center', padding: 20 }}>
{this.state.down ? 'pull down' : 'pull up'} {i}
</div>
))}
</PullToRefresh>
</div>);
}
}
export default(Demo)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论