@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

| 参数 | 类型 | 说明 | 默认值 | | ----------------- | ------------------- | ---------------------------------------------- | ----------- | | id | string | 必传,组件唯一标识 | 'mescroll' | | theme | 'dark' | 'light' | 组件下拉刷新主题，light亮色，dark暗色 | 'dark' | | backgroundColor | string | 组件背景颜色 | '#FFFFFF' | | usePullRefresh | boolean | 是否开启下拉刷新 | true | | useInfiniteScroll | boolean | 是否开启上拉加载 | true | | auto | boolean | 是否在初始化完毕之后自动执行一次下拉刷新的回调 | false | | textInOffset | string | 下拉刷新 文案 | '下拉刷新' | | textOutOffset | string | 释放更新 文案 | '释放更新' | | textLoading | string | 加载中... 文案 | '加载中...' |

| 事件名 | 说明 | 回调参数 | | ------------- | ------------ | ------------------------------------ | | init | 初始化事件 | event: Mescroll | | pullrefresh | 下拉刷新事件 | event: ()=>void 结束下拉刷新回调函数 | | scroll | 滚动事件 | | | scrollToLower | 滚动触底事件 | |

| 事件名 | 说明 | 回调参数 | | --------------- | ------------ | ------------------------------------ | | onInit | 初始化事件 | event: Mescroll | | onPullRefresh | 下拉刷新事件 | event: ()=>void 结束下拉刷新回调函数 | | onScroll | 滚动事件 | | | onScrollToLower | 滚动触底事件 | |