I'm very sorry to have paid attention to the columnists, but there have been few updates in the last month.

This time share a react mobile end encapsulated rolling plug-in.

When we do vertical rolling on the mobile end, there will be various problems, such as carton, penetration, compatibility, and the most intolerable is carton, such as the use of IScroll5 When using transition to calculate the scroll status in real time, it consumes performance. All kinds of iscroll carton solutions you can find in Baidu have tried, and finally you have to give up. The experience on IOS is OK, but in Android's scroll experience, one word: cao.

Then I used it. JRoll2 The author uses translate scrolling mode, which greatly reduces the situation of Carton. Open the mobile website of Jingdong, click on the classification of the bottom bar, and then use translate scrolling mode to realize the classification navigation on the left side.

Iscroll and JRoll use the same way. I can switch seamlessly by changing only one require ('Iscroll') => require ('jroll').

Here's how to encapsulate JRoll and how to use it.

Encapsulating JRoll

Create a new MyScroll.js: jroll is very small and easy to use. I simply encapsulated three configuration parameters: ID, height, children. ID is the ID attribute for configuring div containers, height is the height of div containers (which must be set), and children is a scrolling list of elements.

We instantiate jroll objects in componentDidMount. When componentDidUpdate occurs, that is, when the data is updated, the height of the scroll area may change. Then refresh is performed to recalculate the scroll area. If you need a more powerful configuration, you can also add the option parameter settings, where I use the default configuration.

import React from 'react'
const JRoll = require('jroll')

export default class MyJRoll extends React.Component {
    constructor(props) {
        super(props)
        this.jroll = null
    }
    componentDidMount() {
        let wrappers = this.props.ID || 'wrappers'
        this.jroll = new JRoll(`#${wrappers}`)
        this.jroll.refresh()
    }
    componentDidUpdate() {
        this.jroll.refresh()
    }
    render() {
        const { height } = this.props
        return (
            <div id={this.props.ID ? this.props.ID : 'wrappers'} style={{height: height ? height : "100%"}}>
                <ul id="scroller">
                    {this.props.children}
                </ul>
            </div>
        )
    }
}

Use MyScroll.js in the react component

Keep in mind that you must set a specific height for the scroll container. The best way is to calculate the required height for the scroll area after the component rendering is completed, and then set it to state. If you use redux, pass it to the store to save the height. Setting state in a component may have the problem of asynchronism and not even updating, but saving and reading in the store does not exist.

import React from 'react'
import MyScroll from './MyScroll'
export class ReportPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            scrollHeight: 0
        }
    }
    
    componentDidMount() {
        //1. Use functions to get your current MyScroll scroll height
        //2. Store the calculated height in state or store
        //These two steps are recommended to be encapsulated as a function.
        this.setState({scrollHeight: newHeight + 'px'})
    }
    
    render() {
        return (
            <MyScroll ID="myWrapper" height={this.state.scrollHeight} ref={myRoll => this.myRoll = myRoll}>
                  <div>1</div>
                  <div>2</div>
                  <div>3</div>
            </MyScroll>
        )
    }
}

Some additional operations

1. It is recommended to add FastClick plug-in on the mobile side to solve some bug s of click events on the mobile side.

2. To use MyScroll scroll plug-in globally, you need to set the following code globally, disable the default event of touch, and set the height of html/body.

document.addEventListener('touchmove', (event) => event.preventDefault(), false);

html, body {
    height: 100%
}

3. To use a rolling plug-in inside a component, you need to set a disabled function in component DidMount () inside the component, and remove the disabled function when uninstalling the component.

componentDidMonut() {
    document.addEventListener('touchmove', this.handler(), false);
}

handler() {
    event.preventDefault()
}

componentWillUnmount() {
    document.removeEventListener('touchmove', this.handler(), false);
}

4. Support the nested use of MyScroll plug-ins. Use the new ID name and height.

<MyScroll ID="myWrapper" height={this.state.scrollHeight} ref={myRoll => this.myRoll = myRoll}>
         <div>1</div>
         <MyScroll ID="childWrapper" height={this.state.childHeight} ref={childRoll => this.childRoll = childRoll}>
         </MyScroll>
</MyScroll>