最近在 react 項目中有要實現(xiàn)全屏滾動的效果怎诫，為了節(jié)省時間

在度娘的指引下引入了 react-fullpage

但是插件終究是插件晌杰，在怪異的需求之下，再好的插件也得跪。

因為fullPage用了錨點全度，而 react路由又使用了 HashHistory

so 被逼無奈只好自己手?jǐn)]一個了

在線預(yù)覽

因為vue相對簡單，所以就說說react版的吧

全屏滾動桅狠，說到底其實就是一個豎屏的輪播圖而已

首先需要定義 state

this.state={
    bannerList:[                 //盒子背景顏色
        {
            bg:"#f6f6f6"
        },
        {
            bg:"#87d9e1"
        },
        {
            bg:"#8185d7"
        },
        {
            bg:"#e187cf"
        }
    ],
    offsetheight:document.documentElement.clientHeight,    //獲取當(dāng)前頁面的高度
    fullPage:0,           //當(dāng)前在第幾頁
    fullPageNum:false,        //是否在滑動
}

然后是靜態(tài)頁面的布局

HTML

render() {
    let fullPage=this.state.bannerList.map((i,index)=>{
        return <div key={index} style={{'height':this.state.offsetheight+'px','background':i.bg}}></div>
    })     //使用map來循環(huán)添加dom
    let fullList=this.state.bannerList.map((i,index)=>{
        return <div key={index} className={this.state.fullPage==index?'color':''} onClick={this.pageInfo.bind(this,index)}></div>
    })
    return (
        <div className="section" style={{'height':this.state.offsetheight+'px'}}>
            <div className="container" style={{'transform': 'translate3d(0px,-'+ this.state.fullPage*this.state.offsetheight +'px, 0px)'}}>
                {fullPage}
            </div>
            <div className="fixed-list">
                {fullList}
            </div>
        </div>
    );
}

css

.section{
    overflow: hidden;
}
.container{
    width: 100%;height: 100%;
    position: relative; transform: translate3d(0px, 0px, 0px); transition: all 1000ms ease;
}
.fixed-list{
    position: fixed;
    top: 40%;right: 20px;
}

.fixed-list div{
    width: 20px;height: 20px;background:#ccc;border-radius: 50%;margin-bottom: 20px;
}

.fixed-list div.color{
    background:#000;
}

豎屏輪播圖讼载，當(dāng)然得有焦點點擊啦

//
//點擊左側(cè)小點時跳轉(zhuǎn)到相應(yīng)的page
//
pageInfo(index){
    this.setState({
        fullPage:index
    })
}

然后去定義鼠標(biāo)滾動事件

//
//鼠標(biāo)事件
//
scroll(e){
    e=e || window.event;
    //
    //是否正在滑動
    //
    if(this.state.fullPageNum){
        return false;
    }
    //
    //   e.wheelDelta為負(fù)數(shù)時向下滑動
    //
    if(e.wheelDelta<0){
        if(this.state.fullPage>=3){
            return false
        }
        this.setState({fullPageNum:true})
        this.pageInfo(this.state.fullPage+1);
        //
        //  css設(shè)置動畫事件為1000，所以等到1000ms后滾動狀態(tài)為false
        //
        setTimeout(()=>{
            this.setState({fullPageNum:false})
        },1000)
    //
    //   否則就是向上劃
    //
    }else{
        if(this.state.fullPage<=0){
            return false;
        }
        this.setState({fullPageNum:true});
        this.pageInfo(this.state.fullPage-1);
        setTimeout(()=>{
            this.setState({fullPageNum:false})
        },1000)
    }
}

最后在react componentDidMount生命周期里為doucment添加鼠標(biāo)滾動事件

componentDidMount(){
        //
        //添加鼠標(biāo)滑動事件
        //
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',this.scroll.bind(this),false);
        }
        window.onmousewheel=document.onmousewheel=this.scroll.bind(this);
    }

至此一個簡單的react 豎屏滾動demo就完成啦

React版源碼鏈接
Vue版源碼鏈接

因為只是簡單實現(xiàn)中跌，所以有很多功能還缺失咨堤。
有什么建議或者疑問請在評論區(qū)不吝賜教。

以上漩符。