https://github.com/raxjs/appear-polyfill

https://github.com/raxjs/appear-polyfill

Last synced: 24 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/raxjs/appear-polyfill
• Owner: raxjs
• Created: 2019-08-13T03:14:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-14T08:22:31.000Z (almost 2 years ago)
• Last Synced: 2024-11-15T11:36:28.528Z (28 days ago)
• Language: JavaScript
• Homepage:
• Size: 104 KB
• Stars: 14
• Watchers: 5
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-rax - appear-polyfill - the web polyfill for appear and disAppear (Rax / Rax Tools)

README

        
[![npm](https://img.shields.io/npm/v/rax-appear.svg)](https://www.npmjs.com/package/rax-appear)

**描述：**

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

## 安装

```bash

$ npm install appear-polyfill --save

```

## 示例

```jsx

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((

  


    {list.map((item) => {

      return (

        
 {

            console.log('appear: ', item, event.detail.direction);

          }}

          onDisappear={() => {

            console.log('disappear: ', item, event.detail.direction);

          }}

        >

          第 {item} 个

        

      );

    })}

  

), document.body, { driver: DriverDOM });

```

## 配置项


**preAppear**

- 类型：`string`

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

```jsx

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 = () => (

     { console.log(e); }}

      source={{

        uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',

      }}

      style={{

        height: 300,

        width: '100%',

      }}

    />

  );

  return (

    


      {

        new Array(10).map(rendderImage)

      }

    

  );

};


render(, document.body, { driver: DriverUniversal });

```