@y.dsh/scroll v1.0.2

React滚动视图，包含下拉刷新、上拉加载、图片懒加载、侧边按钮。

引入css（在scss文件中）

@import '~@y.dsh/scroll/lib/index.css';

import Scroll from '@y.dsh/scroll';

const ref = useRef();
function refreshing (){
  setTimeout(() => { // 模拟接口
    ref.current.downComplete({
      // 不论成功或者失败 都需要调用刷新完成函数 否则将停滞在刷新中
      success: true // 参数为是否成功 success: boolean
    });
  }, 1000)
}
function loading (){
  setTimeout(() => { // 模拟接口
    ref.current.loadComplete({
      // 需要调用加载完成函数 否则将停滞在加载中
      success: true, // 参数为是否成功 success: boolean
      end: false // 参数为是否到底了 end: boolean
    });
  }, 1000)
}
<Scroll
  ref={ref}
  down={{
    refreshing
  }}
  up={{
    loading
  }}
  side={{
    button: {
      inlayType: 'theTop'
    } 
  }}
>
  <span>11</span>
</Scroll>

Scroll参数

Down | 参数 | 说明 | 默认值 | 类型 | 必选 | |---------------|----------------------------------------------------|-----------|------------|:----:| | enable | 启用 如果在下拉状态下禁用 会被延迟到下拉结束后在禁用 | true | boolean | × | | offset | 可以触发刷新的位置 | 80 | number | × | | outOffsetRate | offset, ~位置时的摩擦阻力 取值0-1 | 0.2 | number | × | | successStay | 刷新成功逗留时间 | 800 | number | × | | refreshing | 下拉刷新回调 | undefined | () => void | × | | custom | 自定义下拉节点，写法可考源码ScrollView/Down.tsx组件 | undefined | any | × |

Up | 参数 | 说明 | 默认值 | 类型 | 必选 | |-------------|------------------------------------------------|-----------|------------|:----:| | enable | 启用 | true | boolean | × | | offset | 距离底部多远可以触发加载 | 100 | number | × | | renderDom | 渲染DOM结构 | true | boolean | × | | successStay | 加载成功逗留时间 | 600 | number | × | | refreshing | 上拉加载回调 | undefined | () => void | × | | custom | 自定义上拉节点，写法可考源码ScrollView/Up.tsx组件 | undefined | any | × |

Lazy | 参数 | 说明 | 默认值 | 类型 | 必选 | |--------------|------------------------|-----------|---------|:----:| | enable | 启用 | true | boolean | × | | offset | 距离底部多远可以触发加载 | 100 | number | × | | srcAttribute | 图片地址属性 | data-lazy | string | × |

Side | 参数 | 说明 | 默认值 | 类型 | 必选 | |--------|----------------|-----------|-------------------------------------------------------------|:----:| | right | 定位 接收css单位 | undefined | string | number | × | | bottom | 定位 接收css单位 | undefined | string | number | × | | button | 按钮属性 | undefined | SideButtonType | SideButtonType[] | × |

SideButtonType

interface SideButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  inlayType?: 'theTop' // 按钮类型 theTop: 回到顶部
  onTap?: () => void | boolean // 如果返回 false 则无法触发框架的默认功能
}