@yangchanghao/pull-infinite-refresh v0.0.2-alapha

@yangchanghao/pull-infinite-refresh

基于mescroll.js封装，mescroll实例方法可参考mescroll.js官网查看

1.下载

（1）npm 方式下载：

npm install @yangchanghao/pull-infinite-refresh -S

（2）yarn 方式下载：

yarn add @yangchanghao/pull-infinite-refresh

2.如何使用

提示若出现typescript报错 @yangchanghao/pull-infinite-refresh 模块找不到，可以在声明文件 .d.ts中添加如下代码

declare module '@yangchanghao/pull-infinite-refresh'

typescript代码如下：

// vite/vue3 环境下
import PullInfiniteRefresh from "@yangchanghao/pull-infinite-refresh/vue";
// raect 环境下
import PullInfiniteRefresh from "@yangchanghao/pull-infinite-refresh/react";
import "@yangchanghao/pull-infinite-refresh/css/index.css";

/** 
 * @describe 组件初始化事件
 * @param mescroll mescroll.js的实例
 */
const onInit = (mescroll)=>{ mescrollInstance = mescroll; }
/**
 * @describe 下拉刷新触发事件
 * @param endRefresh 拉下刷新结束回调
 */
const onPullrefresh = (endRefresh: ()=>void) => {
      console.log('下拉刷新')
      setTimeout(() => {
        endRefresh?.()
      }, 1500)
}
/**
 * @describe 组件滚动事件事件
 */
const onScroll = () => console.log("组件滚动了")
/**
 * @describe 组件触底事件
 */
const onScrollToLower = () => console.log('触底了')

vue3 template 组件代码块如下：

<template>
  <div class="container">
    <pull-infinite-refresh
      theme="light"
      backgroundColor="#1897ff"
      textInOffset="下拉刷新数据"
      textOutOffset="释放更新更多内容"
      textLoading="正在拼命加载中..."
      @init="onInit"
      @pullrefresh="onPullrefresh"
      @scroll="onScroll"
      @scrollToLower="onScrollToLower">
      <div class="inner">
        <!-- 这是容器的内容 可自己编写 -->
      </div>
    </pull-infinite-refresh>
  </div>
</template>

react tsx 组件代码块如下：

<div className="container">
    <pull-infinite-refresh
        theme="light"
        backgroundColor="#1897ff"
        textInOffset="下拉刷新数据"
        textOutOffset="释放更新更多内容"
        textLoading="正在拼命加载中..."
        onInit={onInit}
        onPullRefresh={onPullRefresh}
        onScroll={onScroll}
        onScrollToLower={onScrollToLower}>
        <div className="inner">
          {/* 这是容器的内容 可自己编写 */}
        </div>
    </pull-infinite-refresh>
    </div>

3.API