Mona系列 - React滚动监听组件

import Watcher from 'mor-scroll-watcher'
const WatcherItem = Watcher.item
 
Watcher.init(options)
<WatcherItem ...>
    ...
</WatcherItem>

import React, { Component } from 'react'
import Watcher from 'mor-scroll-watcher'
 
const WatcherItem = Watcher.item
 
export default class Home extends Component {
    componentDidMount () {
        new Watcher({
            wrap: findDOMNode(this.refs.views)
            // bottomEmit: 100,
            // initEmit: false
        })
    }
 
    onWatcher (index) {
        // do something
        console.log(index)
    }
 
    render () {
        const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
        return (
            <div className="wrap" ref="views">
                <For of={list} each="item" index="index">
                    <WatcherItem
                        className="w-full scroller-item"
                        key={index}
                        style={{
                            height: '200px',
                            background: 'yellow',
                            margin: '20px 0'
                        }}
                        onWatcher={this.onWatcher.bind(this, index)}
                    >
                        {item}
                    </WatcherItem>
                </For>
            </div>
        )
    }
}
 

import React, { Component } from 'react'
import Watcher from 'mor-scroll-watcher'
 
const WatcherItem = Watcher.item
 
export default class Home extends Component {
    componentDidMount () {
        new Watcher({
            wrap: findDOMNode(this.refs.views)
            monaId: 'weiyiID_123456'
            // bottomEmit: 100,
            // initEmit: false
        })
    }
 
    onWatcher (index) {
        // do something
        console.log(index)
    }
 
    render () {
        const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
        return (
            <div className="wrap" ref="views">
                <For of={list} each="item" index="index">
                    <WatcherItem
                        monaId: 'weiyiID_123456'
                        className="w-full scroller-item"
                        key={index}
                        style={{
                            height: '200px',
                            background: 'yellow',
                            margin: '20px 0'
                        }}
                        onWatcher={this.onWatcher.bind(this, index)}
                    >
                        {item}
                    </WatcherItem>
                </For>
            </div>
        )
    }
}