npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mescroll-react

v1.1.0

Published

mescroll.js的react版本

Downloads

3

Readme

开始

可直接复制到代码中修改使用

运行该页面,试试下拉刷新上滑加载吧!

.wrap {
  // 一定要给一个固定高度哦
  position: fixed;
  width: 100%;
  height: 100%;
  .each {
    margin: 10vw;
    font-size: 10vw;
  }
}
import React, { useRef, useState } from 'react'
import MescrollReact, { refType } from 'mescroll-react'

const mockData = (length: number) => Array.from({ length }, (_v, i) => `item${i + 1}`)
const pageSize = 10

function Demo() {
  const ref = useRef<refType | null>(null)
  const [page, setPage] = useState(1)
  const [list, setList] = useState(mockData(page * pageSize))

  const dropDownCb = () => {
    setPage(() => {
      setList(mockData(1 * pageSize))
      ref.current?.endDropDown()
      return 1
    })
  }
  const upGlideCb = () => {
    setPage(v => {
      const nextPgae = v + 1
      setList(mockData(nextPgae * pageSize))
      // mock第五页之后没有数据了
      ref.current?.endUpGlide(nextPgae < 5)
      return nextPgae
    })
  }
  return (
    <>
      <MescrollReact className="wrap" ref={ref} dropDownCb={dropDownCb} upGlideCb={upGlideCb}>
        {list.map(v => (
          <div className="each" key={v}>
            {v}
          </div>
        ))}
      </MescrollReact>
    </>
  )
}

export default Demo

组件透传参数说明

目前暂时开放以下参数,后续会补充

interface PropRule {
  // 下拉刷新回调
  dropDownCb?: () => void
  // 上滑触底回调
  upGlideCb?: () => void
  className?: string
  style?: React.CSSProperties
  children?: React.ReactNode
  // 还剩多少距离(px)触发上滑触底回调
  upGlideOffset?: number
}

ref 参数说明

interface refType = {
  // 结束下拉刷新状态
  endDropDown: () => void
  // 结束上拉加载状态: hasMore是否有更多,传false时上滑触底回调不再触发
  endUpGlide: (hasMore?: boolean) => void
  // 滚动列表到指定位置: yAxis为竖直方向距离  time为毫秒
  scrollTo: (yAxis: number, time: number) => void
}