基于React的全屏滑动插件react-fullslip

npm上已有react-fullpage,但是他的实现方式是使用锚点,重新刷新后会出现bug.

因此自己造了一个轮子.欢迎大家使用,star,PR

github地址: github.com/dogXgod/ful… 

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

全屏滚动的容器组件

在componentDidMount时绑定mouseWheel事件,这里做了兼容处理:

componentDidMount() {
  if (document.addEventListener) {
  	document.addEventListener('DOMMouseScroll', this.mouseScroll.bind(this), false);
  }
	window.onmousewheel = document.onmousewheel = this.mouseScroll.bind(this);
}
复制代码

mouseScroll中的逻辑:

1. 判断是否正在滚动 
2. 判断边界 
3. 当前页改变
   

//翻页函数 n=1向后翻页 n=-1向前翻页
scroll(n) {
  this.setState({
    isScroll: true,
    currentPage: this.state.currentPage + n
  });
  setTimeout(() => {//动画 duration时间结束后再把状态切换为没有滑动
    this.setState({
      isScroll: false
    })
  }, this.state.duration);
}//给document/window绑定的滚轮时间
mouseScroll(e) {
  e = e || window.event;
  if (this.state.isScroll) {
    return false;//如果正在滚动,取消事件
  }
  if (e.wheelDelta < 0 || e.detail > 0) {//小于0说明向下滚动
    if (this.state.currentPage >= this.state.pageCount) {//边界判断
      return false;
    }
    this.scroll(1)

  } else if (e.wheelDelta > 0 || e.detail < 0) {
    if (this.state.currentPage <= 0) {
      return false;
    }
    this.scroll(-1)
  }
};
复制代码

点击导航切换到对应页:

//给导航点绑定点击事件 index为传入的页面索引
handleNavClick(index) {
  this.setState({
    currentPage: index
  })
}
复制代码

//给箭头导航绑定点击事件
handleArrowClick(n) {
  if (this.state.currentPage > this.state.pageCount) {//边界判断
    return false;
  }
  this.scroll(n);
}复制代码

css

为了不显示全屏滚动条,在css中做了处理

//隐藏滚动条
html {
  overflow: -moz-scrollbars-none; //firefox
  -ms-overflow-style: none; //ie
}
html::-webkit-scrollbar { /*webkit内核*/
  display: none;
}复制代码

SlipItem

单纯的页面容器组件,在这里可以编写页面

预览

结尾

再次欢迎大家使用,star,PR