raxjs/appear-polyfill

描述： 封装了组件 Appear 和 Disappear 的监听。

安装

$ npm install appear-polyfill --save

示例

import { createElement, render } from 'rax';
import * as DriverDOM from 'driver-dom';
import { isWeb } from 'universal-env';
import { setupAppear } from 'appear-polyfill';

if (isWeb) {
  setupAppear(window);
}

const list = [];
for (let index = 1; index <= 100; index++) {
  list.push(index);
}

render((
  <div>
    {list.map((item) => {
      return (
        <div
          style={{
            height: 100,
            backgroundColor: '#ccc',
            marginBottom: 20,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
          onAppear={(event) => {
            console.log('appear: ', item, event.detail.direction);
          }}
          onDisappear={() => {
            console.log('disappear: ', item, event.detail.direction);
          }}
        >
          第 {item} 个
        </div>
      );
    })}
  </div>
), document.body, { driver: DriverDOM });

配置项

preAppear

• 类型：string

支持预加载浏览器视口底部更多偏移的内容，单位 px。为需要预加载的元素设置 preappear 事件。

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Image from 'rax-image';

import { setupAppear } from 'appear-polyfill';

if (isWeb) {
  setupAppear(window, {
    preAppear: '0px 0px 100px 0px'
  });
}

const App = () => {
  const rendderImage = () => (
    <Image
      onPreappear={(e) => { console.log(e); }}
      source={{
        uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
      }}
      style={{
        height: 300,
        width: '100%',
      }}
    />
  );
  return (
    <div>
      {
        new Array(10).map(rendderImage)
      }
    </div>
  );
};

render(<App />, document.body, { driver: DriverUniversal });