antd-mobile PullToRefresh 小米手机自带浏览器无法上拉

发布于 2022-09-13 01:28:39 字数 1716 浏览 35 评论 0

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文