<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script type="module" src="https://unpkg.com/@json_web_component/infinitscrollpagination/dist/main.min.js"></script>
  <title>Title</title>
  <script type="module">
  </script>
  <style>
    .scroll-container {}
  </style>
</head>

<body>
  <infinit-scroll class="scroll-container" height="200px">
  </infinit-scroll>
  <script>
    const container = document.querySelector('.scroll-container');
    let loading = false;
    let hasMore = true;
    container.setAttribute('has-more', hasMore);
    container.setAttribute('loading', loading);
    container.addEventListener('load', getListData)
    function getListData(page) {
      loading = true;
      container.setAttribute('loading', loading);
      setTimeout(() => {
        loading = false;
        hasMore = false;
        container.setAttribute('has-more', hasMore);
        container.setAttribute('loading', loading);
        console.log(page, '获取到数据');
        for (let i = 0; i < 12; i++) {
          const item = document.createElement('div');
          const styles = {
            height: '80px',
            background: '#eee',
            marginBottom: '10px'
          }
          for (const key in styles) {
            if (Object.hasOwnProperty.call(styles, key)) {
              const val = styles[key];
              item.style[key] = val;
            }
          }
          // 如果 reverse 为 true
          container.append(item);
          // 如果 reverse 为 false
          // container.prepend(item)
          // 如果需要滚动到底部
          // container.scrollToEnd();
          // 如果需要滚动到顶部
          // container.scrollToTop();
        }
      }, 800)
    }
  </script>
</body>

</html>

<!-- 原生 html 引用 -->
<script type="module" src="https://unpkg.com/@json_web_component/infinitscrollpagination/dist/main.min.js"></script>

// vue3 vite处理
export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                isCustomElement: tag => tag === 'infinit-scroll'
                }
            }
        })
    ]
})
// vue 或 react只需在 main.js 中引用
import "@json_web_component/infinitscrollpagination";
// 其他使用方法请参考html的写法结合 vue 的写法

// tsconfig 中添加 include
{
  "compilerOptions":{},
  "include": ["node_modules/@json_web_component/infinitscrollpagination/dist/global.d.ts"],
}

// react 使用问题
// 如果ts报错: Property 'infinit-scroll' does not exist on type 'JSX.IntrinsicElements'.
// 1. 创建一个全局类型文件 例如 global.d.ts
// 2. 在tsconfig 中include 中加入该全局类型文件
// 该全局文件的内容如下:

declare namespace JSX {
  interface IntrinsicElements {
    'infinit-scroll': React.DetailedHTMLProps<InfinitScrollPaginationAttr, HTMLElement>;
  }
}

// 如果需要在定义当前元素的ref类型
// vue
const cusref = ref<InfinitScrollPaginationElement | null>(null);
// react
const cusref = useRef<InfinitScrollPaginationElement | null>(null)

Keywords

FAQs

What is @json_web_component/infinitscrollpagination?

Is @json_web_component/infinitscrollpagination popular?

Is @json_web_component/infinitscrollpagination well maintained?

Last updated on 10 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install