# taroRefresh

**Repository Path**: jeckSong/taroRefresh

## Basic Information

- **Project Name**: taroRefresh
- **Description**: taro 小程序数据加载组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-12-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


```
import Taro from '@tarojs/taro';
import { connect } from '@tarojs/redux'
function withLoadList(opts = {}) {
    return function demoComponent(Component) {
        // redux里面的用户数据
        // @connect(({ memberToken }) => ({
        //     memberToken
        // }), (dispatch) => ({

        // }))
        class Hoc extends Component {
            constructor(props) {
                super(props);
                this.state = {
                    resData: [],
                    scrollTop: 50,
                    nextText: false,
                    preText: false
                };
                this.downLoad = false;
                this.type = 0;
                this.prePage = 0;
                this.preTotal = 1;
                this.nextPage = 0;
                this.nextTotal = 1;
                this.pageSize = 20;
                this.isOneLoad = true;
                this._setData = this._setData.bind(this)
                this.setOneLoad = this.setOneLoad.bind(this)
                this.setType = this.setType.bind(this)
                this.computePage = this.computePage.bind(this)
                this.setPrePage = this.setPrePage.bind(this)
                this.setNextPage = this.setNextPage.bind(this)
                this.handleData = this.handleData.bind(this)
                this._onScrollToUpper = this._onScrollToUpper.bind(this)
                this._onScrollToLower = this._onScrollToLower.bind(this)
                this.setScrollTop = this.setScrollTop.bind(this)
            }
            setOneLoad(b) {
                this.isOneLoad = b
            }
            setType(type = 0) {
                this.type = type;
            }
            computePage(total) {
                return Math.ceil(total / this.pageSize)
            }
            setPrePage() {
                let bool = this.computePage(this.preTotal) > this.prePage
                this.prePage = this.prePage + 1;
                console.log(this.computePage(this.preTotal), this.prePage);

                return bool
            }
            setNextPage() {
                this.nextPage += 1;
                let bool = this.computePage(this.nextTotal) > this.nextPage
                return bool
            }
            handleData() {
                switch (this.type) {
                    case 0:
                        return {
                            pageNum: this.nextPage,
                            pageSize: this.pageSize,
                            type: 0
                        }
                        break;
                    case 1:
                        return {
                            pageNum: this.prePage,
                            pageSize: this.pageSize,
                            type: 1
                        }
                        break;
                }
            }
            _onScrollToUpper() {
                if (!this.downLoad) {
                    this.nextPage = 0;
                    this.nextTotal = 1;
                    this._onScrollToLower()
                    return false;
                }
                this.setType(1)
                if (this.setPrePage()) {
                    this.requestRefresh()
                } else {
                    console.log('没有了---');
                    this.setState({
                        preText: true
                    })
                }
            }
            _onScrollToLower() {
                this.setType(0)
                if (this.setNextPage()) {
                    this.requestRefresh()
                } else {
                    console.log('没有了');
                    this.setState({
                        nextText: true
                    })
                }
            }
            _setData(data) {
                console.log(this.state, '_setData');
                let { resData } = this.state
                switch (this.type) {
                    case 0:
                        return [...resData, ...data]
                    case 1:
                        this.setScrollTop(data)
                        return [...data, ...resData]
                }
            }
            setScrollTop(data) {
                let { prePage } = this
                console.log(this);

                this.setState({
                    scrollTop: 50 + this.prePage
                })
            }
            async componentDidShow() {
                // this.props.getList({
                //     pageNum: 1,
                //     pageSize: 20,
                //     type: 0
                // }, (data) => {
                //     this.handleList(data.rows)
                // })
                console.log(this, 'aaaa', 'aaaathis.requestRefresh()');

                this.requestRefresh()
                if (super.componentDidShow) {
                    console.log(this.props, 'bbb');
                    super.componentDidShow();
                }
            }
            requestRefresh() {
                console.log(this.extensionData, this.downLoad, '====??????');

                // console.log(this.props.onGetDataFun(this.handleData()), 'this.props.onGetDataFun(this.handleData())');
                this.props.getList && this.props.getList({ ...this.handleData(), ...this.extensionData }).then(resData => {
                    console.log(resData, '===>');
                    console.log('<<<<<===>');
                    if (this.type === 0) {
                        this.nextTotal = resData.total
                        if (this.nextTotal <= 9 && this.isOneLoad && this.downLoad) {
                            this._onScrollToUpper()
                        }
                    } else {
                        this.preTotal = resData.total
                    }
                    this.setOneLoad(false)
                    // console.log(this._setData(resData.rows), this, 'hhhhhh');
                    console.log(this, this.setState(), '_setData');
                    let data = this._setData(resData.rows)
                    this.setState({
                        resData: data
                    })
                })
            }
            render() {
                return super.render();
            }
        }

        return Hoc;
    };
}

export default withLoadList;

```
使用

新建一个list.js


```
import withLoadList from '../model/withLoadList'
<ScrollView
    onScrollToLower={this._onScrollToLower.bind(this)}
    onScrollToUpper={this._onScrollToUpper.bind(this)}
    scrollTop={scrollTop}
    style={`height:${windowHeight}px;width: 100%;`}
    scrollWithAnimation
    scrollY>
    <View style={`display:flex;flex-direction: row; flex-wrap: wrap;`}>
        {
            this.state.resData.map((item, key) => {
                return (
                   <Item key={key} data={item}></Item>      
                )
            })
        }
    </View>
</ScrollView>
```