fullPage竖屏滚动 vuereact版

Posted 2023-05-15

参考技术A 最近在 react 项目中有要实现全屏滚动的效果，为了节省时间

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

但是插件终究是插件，在怪异的需求之下，再好的插件也得跪。

因为fullPage用了锚点，而 react路由又使用了 HashHistory

so 被逼无奈只好自己手撸一个了

在线预览

因为vue相对简单，所以就说说react版的吧

全屏滚动，说到底其实就是一个竖屏的轮播图而已

首先需要定义 state

至此一个简单的react 竖屏滚动demo就完成啦

React版源码链接
Vue版源码链接

因为只是简单实现，所以有很多功能还缺失。
有什么建议或者疑问请在评论区不吝赐教。

以上。

fullpage.js全屏滚动插件使用方法

在移动端经常会用到全屏滚动插件，实现常见H5活动页的效果，fullpage是一个很不错的jquery全屏滚动插件

fullpage.js插件的API：http://www.dowebok.com/77.html

常用使用方法：

// 配置示例
$.fn.fullpage({    
    anchors:["page1","page2","page3"],
    slidesColor:["#fff","#000","#333"]   
})

//方法调用示例
//moveTo(section, slide)设置屏幕滚动到某个section或slide,两个参数都是某个内容块的索引值或者是锚文本，默认情况下slide的索引被设置为0。
$.fn.fullpage.moveTo(1,0)  //有动画效果
$.fn.fullpage.silentMoveTo(1,0) //没有动画效果

//回调函数
$(‘#fullpage‘).fullpage({
    anchors: [‘firstPage‘, ‘secondPage‘, ‘thirdPage‘, ‘fourthPage‘, ‘lastPage‘],
    slidesColor:["#fff","#000","#333","#666","#999"],
    
// 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数。
// anchorLink 是锚链接的名称
// index 是section的索引，从1开始计算
    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }
        //using anchorLink
        if(anchorLink == ‘secondSlide‘){
            alert("Section 2 ended loading");
        }
    }
// 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数
// index 是离开的“页面”的序号，从1开始计算；
// nextIndex 是滚动到的“页面”的序号，从1开始计算；
// direction 判断往上滚动还是往下滚动，值是 up 或 down。
    onLeave: function(anchorLink, index){
         var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 && direction ==‘down‘){
            alert("Going to section 3!");
        }
        else if(index == 2 && direction == ‘up‘){
            alert("Going to section 1!");
        }
    }
});

找到一个很不错的帮助文档：帮助文档