本文同步发表在我的个人博客中&＃xff1a;
沧沧凉凉www.cclliang.com
随着前端的飞速发展&＃xff0c;现在制作界面时出现了非常多的好看的样式&＃xff0c;比如说全屏滚动效果&＃xff0c;能够带来很舒服的视觉体验。先来看一下什么是全屏滚动&＃xff1a;
这是fullpage.js的官网&＃xff0c;只需要滑动一下滚轮&＃xff0c;就能实现翻页的效果。
安装
fullPage.js中文文档github.com
如何安装其实文档上面已经说得很清楚了&＃xff0c;即&＃xff1a;
// 使用 bower
bower install fullpage.js// 使用 npm
npm install fullpage.js
包含文件&＃xff1a;
因为现在的单页面应用几乎都是使用的webpack打包工具&＃xff0c;所以直接看一下webpack怎么引入&＃xff0c;如果有使用其它工具&＃xff0c;可以直接到下面的网址进行查看如何引入。
https://github.com/alvarotrigo/fullPage.js/wiki/Use-module-loaders-for-fullPage.jsgithub.com
// Optional. When using fullPage extensions
//import scrollHorizontally from &＃39;./fullpage.scrollHorizontally.min&＃39;;// Optional. When using scrollOverflow:true
//import IScroll from &＃39;fullpage.js/vendors/scrolloverflow&＃39;;// Importing fullpage.js
import fullpage from &＃39;fullpage.js&＃39;;// When using fullPage extensions replace the previous import
// of fullpage.js for this file
//import fullpage from &＃39;fullpage.js/dist/fullpage.extensions.min&＃39;;// Initializing it
var fullPageInstance &＃61; new fullpage(&＃39;#myFullpage&＃39;, {navigation: true,sectionsColor:[&＃39;#ff5f45&＃39;, &＃39;#0798ec&＃39;, &＃39;#fc6c7c&＃39;, &＃39;grey&＃39;]
});
应用于React
根据上面的方法&＃xff0c;我们很容易就可以在React中进行使用fullpage.js&＃xff0c;只需要创建&＃xff1a;
Some section
Some section
Some section
Some section
}
可以看到通过上面的集成后&＃xff0c;初步效果已经出来了&＃xff0c;剩下的就是填充自己的内容&＃xff0c;并且根据需要进行配置。
var myFullpage &＃61; new fullpage(&＃39;#fullpage&＃39;, {//导航menu: &＃39;#menu&＃39;,lockAnchors: false,anchors:[&＃39;firstPage&＃39;, &＃39;secondPage&＃39;],navigation: false,navigationPosition: &＃39;right&＃39;,navigationTooltips: [&＃39;firstSlide&＃39;, &＃39;secondSlide&＃39;],showActiveTooltip: false,slidesNavigation: false,slidesNavPosition: &＃39;bottom&＃39;,//滚动css3: true,scrollingSpeed: 700,autoScrolling: true,fitToSection: true,fitToSectionDelay: 1000,scrollBar: false,easing: &＃39;easeInOutCubic&＃39;,easingcss3: &＃39;ease&＃39;,loopBottom: false,loopTop: false,loopHorizontal: true,continuousVertical: false,continuousHorizontal: false,scrollHorizontally: false,interlockedSlides: false,dragAndMove: false,offsetSections: false,resetSliders: false,fadingEffect: false,normalScrollElements: &＃39;#element1, .element2&＃39;,scrollOverflow: false,scrollOverflowReset: false,scrollOverflowOptions: null,touchSensitivity: 15,bigSectionsDestination: null,//可访问keyboardScrolling: true,animateAnchor: true,recordHistory: true,//布局controlArrows: true,verticalCentered: true,sectionsColor : [&＃39;#ccc&＃39;, &＃39;#fff&＃39;],paddingTop: &＃39;3em&＃39;,paddingBottom: &＃39;10px&＃39;,fixedElements: &＃39;#header, .footer&＃39;,responsiveWidth: 0,responsiveHeight: 0,responsiveSlides: false,parallax: false,parallaxOptions: {type: &＃39;reveal&＃39;, percentage: 62, property: &＃39;translate&＃39;},cards: false,cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},//自定义选择器sectionSelector: &＃39;.section&＃39;,slideSelector: &＃39;.slide&＃39;,lazyLoading: true,//事件onLeave: function(origin, destination, direction){},afterLoad: function(origin, destination, direction){},afterRender: function(){},afterResize: function(width, height){},afterReBuild: function(){},afterResponsive: function(isResponsive){},afterSlideLoad: function(section, origin, destination, direction){},onSlideLeave: function(section, origin, destination, direction){}
});
如果你想将一个页面设置为默认页&＃xff0c;只需要给它添加active类&＃xff0c;例如Some section
导航小圆点
这种导航小圆点是非常实用的一个功能&＃xff0c;引入也很简单&＃xff0c;
import &＃39;fullpage.js/dist/fullpage.min.css&＃39;; //引入CSS样式&＃xff0c;如果不引入是无法显示小圆点。new fullpage(&＃39;#fullpage&＃39;, {navigation:true, // 开启小圆点
});
锚点
通常我们都需要一些锚点&＃xff0c;点击锚点直接进行切换页面&＃xff1a;
根据官方文档&＃xff0c;如果要使用锚点功能只需要在HTML标签中使用属性data-anchor&＃xff0c;例&＃xff1a;
slide 1
slide 2
slide 3
slide 4
或者也可以直接在声明时进行初始化&＃xff1a;
new fullpage(&＃39;#fullpage&＃39;, {anchors:[&＃39;firstPage&＃39;, &＃39;secondPage&＃39;, &＃39;thirdPage&＃39;]
});
但是我发现了一个新问题&＃xff1a;在react-router的HashRouter中会把#当做是hash来处理。也就是说锚点在HashRouter中无法使用。HashRouter即地址栏中包含#的模式&＃xff0c;例如&＃xff1a;https://www.xxx.cn/#/这种地址&＃xff0c;既然这种地址这么丑&＃xff0c;为什么还要使用呢&＃xff1f;
因为项目部署到服务器后&＃xff0c;如果没有后端进行转发或者重定向&＃xff0c;不使用HashRouter模式就可能存在你刷新一下页面会出现页面未找到的情况&＃xff0c;但是我没有找到太好的解决办法。目前仅想到了使用fullpage_api.moveTo();方法来进行控制&＃xff0c;但是远远没有锚点方便。
react-fullpage
都写到这里了&＃xff0c;我才发现原来这个插件有React版本的&＃xff0c;不仅有React版本&＃xff0c;甚至还有Vue和Angular&＃xff0c;不过应该仅仅是在该插件的基础上做了封装。
react-fullpagegithub.com
安装
npm install &＃64;fullpage/react-fullpage
使用
使用方法大体相同&＃xff0c;如果将上面的例子改为react-fullpage写法即为&＃xff1a;
import React, {Component} from &＃39;react&＃39;;
import ReactFullpage from &＃39;&＃64;fullpage/react-fullpage&＃39;;class Test extends Component {render() {return ( {return (Some section
Some section
Some section
Some section
);}}/>);}
}
export default Test;
视频推荐
全屏滚动插件fullpage使用-炫酷购物车案例-黑马程序员pink老师&＃xff08;素材已经更新&＃xff09;_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
京公网安备 11010802041100号