基於React的全屏滑動外掛react-fullslip

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