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

刘辉龙
  • 1
新手上路,请多包涵

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)

回复
阅读 120
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏