npm上已有react-fullpage,但是他的实现方式是使用锚点,重新刷新后会出现bug.因此自己造了一个轮子.欢迎大家使用,star,issues
一年多没上自己的github。。没想到这个插件还真有人用，还有人点了星，提了issues，我已经把issues中的问题都解决了。。今后也会积极更新这个插件，欢迎使用！大家一起找 bug！
2019.09.06 更新
- 重新整理都思路，重构了代码
- 解决调整窗口大小滚动距离不变都bug
- 解决issues #3中提出都需求
- demo和插件代码分离，现在不会报错啦
2018.07.29更新
- 新增箭头导航参数,点击箭头可翻页
2018.07.25更新
- 新增了改变滑动方向的参数，可改为竖向或横向；
- 新增了导航点可添加自定义图片的参数。
使用
插件已经上传npm.
- 下载
npm install react-fullslip
- 引入
import {FullSlip,SlipItem} from "react-fullslip";
- 使用
render() {
let options = {
navigation: true,//是否开启导航点,默认为true
activeClass: 'active',自定义导航点类名,默认为active,.navigation-dot下的.active
duration:1000,//屏幕滑动切换的时间,默认为1000
transverse:true,//是否更改为横向滑动,默认为false
navImage:[require('./assets/1.jpg'),require('./assets/2.jpg'),require('./assets/3.jpg')]//导航点图片,可选,默认无图片
arrowNav:true, //是否开启箭头导航 默认false不开启
};
return (
<div className="App">
<FullSlip {...options}>
<SlipItem style={{backgroundColor:'#C6E2FF'}}>
page1
</SlipItem>
<SlipItem style={{backgroundColor:'#C1FFC1'}}>
page2
</SlipItem>
<SlipItem style={{backgroundColor:'#FFEC8B'}}>
page3
</SlipItem>
</FullSlip>
</div>
);
}需求:全屏滚动,不需要滚动条
这里我定义了两个组件,FullSlip和SlipItem,由FullSlip包住SlipItem并且在SlipItem里面完成页面.
FullSlip
全屏滚动的容器组件
因为做了大量的更改，欢迎移步查看源码
css
为了不显示全屏滚动条,在css中做了处理
//隐藏滚动条
html {
overflow: -moz-scrollbars-none; //firefox
-ms-overflow-style: none; //ie
}
html::-webkit-scrollbar { /*webkit内核*/
display: none;
}SlipItem
单纯的页面容器组件,在这里可以编写页面
预览
结尾
没想到自己随手写的小东西也有人关注，不禁老泪纵横。
