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 (    
      
      
               
        
                   page1        
                
        
                   page2        
                
        
                   page3        
              
           
      
  );}复制代码

需求:全屏滚动,不需要滚动条

这里我定义了两个组件,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