翻页计数 react组件

Posted 龙骑士baby

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了翻页计数 react组件相关的知识,希望对你有一定的参考价值。

1、翻页效果如下

 

2、使用方法

a.页面中引入组件

import FlipOverCounter from \'./flipOver/FlipOverCounter\'

b.传入参数
<FlipOverCounter
            min={min}    //翻页的起点
            max={max}    //翻页的终点
            time={time}  //翻完起点到终点所需要用的时间 以毫秒计算 如:1分钟应传入60000
            len={len}    //页数
    />

  

c.翻页速度

组件会计算max-min的值在传入的time内是否能够一页页翻完,如果不能则会快速跳页翻

d.组件样式

注意,flipOverCounter.less写了组件的基础样式,实际项目中需要自己调整页面和组件样式

 

3、组件源码和使用demo

喜欢的话欢迎给个star哦

https://github.com/xingxiaoyiyio/React-FlipOver-Counter

 

以上是关于翻页计数 react组件的主要内容,如果未能解决你的问题,请参考以下文章

react-pdf 实现 pdf 在线预览(翻页、放大缩小等)

React 函数组件与class组件的区别

React 函数组件与class组件的区别

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

[译] 如何在React中写出更优秀的代码