fullPage 使用总结

相对iScroll,fullPage更显的小巧实用。毕竟我们好像对于产品的需求没有那么高,特别是如果只是为了要展示好看的内容,这个会是更好的选择。

相对于iScroll好用的地方:1,翻页的时候或者跳转之后希望能回到之前的页面;2,页面切换的状态有很多,比如翻页方向,翻页前,翻页后;3,分页导航;4:顶部导航和footer。总之,这个的定制性稍强一点吧。

使用之前需要注意的问题:fullPage是在jQuery的基础上开发的,so~需要先引入jq1.6以上的版本,才能保证fp的正常工作。然后呢,fp有它自己的样式,并且我们一般没有特殊的需求的话,是可以考虑直接引用的。

如果你知道bower,你可以不需要手动下载fp,因为官方在bower做了注册,所以可以这样:

bower install fullpage.js

当然node环境是前提。如果不行就手动下载,bower不过也就是帮我们省去了这个环节。

使用fp的没怎么遇到难点,主要原因还是需求比较简单明了。

主要讲一下几个亮点吧

1:#anchor

anchors:['firstSlide', 'secondSlide']
需要记忆页面的话,就是这个了,定义好每个页面的别名,在连接上就会在当前页面显示#xxx。

2:翻页统计

需要记录一下用户最多翻到第几页,这个需求和用户最后停留在第几页还不太一样,也就是说取最大值。

对于统计页面我把开始统计的代码放到了 

afterLoad
这个方法里面。

fp插件应用还是比较广泛的, 它的github地址:https://github.com/alvarotrigo/fullPage.js

使用者也不乏一些大的公司。

以上是开发的时候遇到的一些问题,其他的需要在仔细了解的话就去github上多看看他的参考文档,或者研究一下源码吧。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Vue.js 项目中使用 fullpage.js,可以使用 Vue-fullpage.js 插件。下面是一个简单的使用示例: 1. 安装 Vue-fullpage.js 使用 npm 或 yarn 安装 Vue-fullpage.js: ``` npm install vue-fullpage.js ``` 或者 ``` yarn add vue-fullpage.js ``` 2. 在 Vue.js 项目中引入 Vue-fullpage.js 在 main.js 中引入 Vue-fullpage.js: ```javascript import Vue from 'vue' import VueFullpage from 'vue-fullpage.js' Vue.use(VueFullpage) ``` 3. 创建 fullpage 组件 在组件中使用 `<vue-fullpage>` 标签创建 fullpage 组件,然后在组件的 data 中定义页面: ```vue <template> <div> <vue-fullpage :options="options"> <div class="section"> <h1>Page 1</h1> </div> <div class="section"> <h1>Page 2</h1> </div> <div class="section"> <h1>Page 3</h1> </div> </vue-fullpage> </div> </template> <script> export default { data() { return { options: { sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'] } } } } </script> ``` 在这个示例中,我们创建了一个 fullpage 组件,定义了三个页面,每个页面都是一个 `<div>` 元素,并设置了页面的颜色。 4. 配置和使用 fullpage.js 可以在组件的 data 中设置 fullpage.js 的配置参数,例如页面滚动的速度、页面的动画效果、是否循环滚动等。可以在 options 对象中设置 fullpage.js 的配置参数,例如: ```javascript data() { return { options: { sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'], scrollingSpeed: 1000, easingcss3: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', loopBottom: true, loopTop: true, anchors: ['page1', 'page2', 'page3'] } } } ``` 可以使用 fullpage.js 提供的钩子函数,例如: ```javascript data() { return { options: { afterLoad: function(origin, destination, direction) { console.log('afterLoad', origin.index, destination.index, direction) }, onLeave: function(origin, destination, direction) { console.log('onLeave', origin.index, destination.index, direction) } } } } ``` 在这个示例中,我们定义了 `afterLoad` 和 `onLeave` 两个钩子函数,分别在页面滚动到新页面之后和离开当前页面之前执行。这些钩子函数可以用来执行一些特定的操作,例如修改页面标题、添加动画效果等。 这样就可以在 Vue.js 项目中使用 fullpage.js 了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值