Mona系列 - React滚动监听组件

✨✨ 这是一款非常有用轻巧的 React 组件，你可以应用到任何需要滚动监听的场景

点我看一下效果

使用场景

• 滚动曝光埋点
• 图片懒加载
• 视图区域按需加载

...

依赖

• mona-events

使用指南

import Watcher from 'mor-scroll-watcher'
const WatcherItem = Watcher.item

Watcher.init(options)
<WatcherItem ...>
	...
</WatcherItem>

你只需要将需要被滚动触发的节点设置为WatcherItem节点的children，就能达到滚动触发的目的。

代码演示

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>
		)
	}
}

高阶用法

当页面内存在多个需要被监听滚动的容器时，需要设置唯一ID

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>
		)
	}
}

options

| 参数 | 说明 | 类型 | 默认值 | 是否必传 | | --- | --- | --- | --- | :-- | | wrap | 滚动容器 | DOM原生节点 | - | yes | | monaId | 当页面内存在多个需要监听的容器时，需要设置唯一的id，并与被监听的WatcherItem的属性monaId保持统一 | String | - | - | | bottomEmit | 滚动距离底部的触发距离 | Number | 0 | no | | initEmit | 初始化是否需要触发一次 | Boolean | true | no |

WatcherItem

| 参数 | 说明 | 类型 | 默认值 | 可选项 | | --- | --- | --- | --- | :-- | | onWatcher | 触发之后的回调 | Function | - | - | | monaId | 当页面内存在多个需要监听的容器时，需要设置唯一的id，并与初始化的实例的属性monaId保持统一 | String | - | - | | className | className属性 | String | - | - |

联系我

微信：599321378