基於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