专注于移动端的fullPage.js

Overview

zepto.fullpage

release issues forks stars license

专注于移动端的fullPage.js。

功能概述

可实现移动端的单页滚动效果,可自定义参数,提供回调接口,和公开接口。

兼容性

  • Ios4+
  • Andriod2.3+(未全部覆盖)

快速上手

HTML

<div class="wp">
    <div class="wp-inner">
        <div class="page page1">1</div>
        <div class="page page2">2</div>
        <div class="page page3">3</div>
        <div class="page page4">4</div>
    </div>
</div>

CSS

父容器需是固定高度,并且溢出为隐藏,fullpage会使用父元素的宽度和高度。

.wp{
    overflow: hidden;            
}

js

一行代码即可完成,如此简单:

$('.wp-inner').fullpage();

注意:是在.wp-inner上调用的。

更多例子,请移步这里

文档

API

贡献指南

如果你想为zepto.fullpage贡献代码,请采用fork + pull request 方式,并在发起pr前先将master上超前的代码rebase到自己的分支上。

发布Bower

$ bower register zepto.fullpage git://github.com/yanhaijing/zepto.fullpage.git

贡献者

贡献者Q群

如果你有任何疑问,请到Issues反馈,此Q群为贡献者使用,仅供贡献者内部讨论使用。

点击加入:zepto.fullpage官方交流群(314819079)

为什么会有这个项目

最近单页滚动的效果非常流行,这种效果的视觉冲击感很强烈,特别是对于活动页面,因为需求的迫切,在pc端诞生了 fullPage.js和onepage-scroll这样的库,在移动的浪潮下,我们自然需要把这种效果搬到移动设备上,但当我在想实现类似效果时,却找不到一个这样的库(fullpage.js对于移动端来说太大了,还要依赖jquery),所以我就开发了一个,先是用于自己项目中,后来抽了出来,就有了这个项目。

更新日志

更新日志

TODO

计划列表

如果你有好的建议,欢迎反馈给我

谁在使用

注:如果您也在使用,欢迎反馈给我

成功案例

更多案例,请点击这里查看

相关链接

如果你知道其他第三方库,欢迎反馈给我

自动化工具

如果你知道其他第三方工具,欢迎反馈给我

Comments
  • 有关zepto.fullpage.js文件暴露方法的一个问题

    有关zepto.fullpage.js文件暴露方法的一个问题

    就是这句:return fullpage[val].apply(fullpage, [].slice.call(arguments, 0)); 我把它改成了return fullpage[val].apply(fullpage, arguments);试了几个结果是一样的,就算被调用的方法也有用到arguments这个关键字。我想问下有没有特殊情况是我没有考虑到的?

    opened by linzb93 8
  • 在mac下demo文件夹里的demo页面都运行不起来?

    在mac下demo文件夹里的demo页面都运行不起来?

    git clone项目到本地后,直接在chrome浏览器打开basic.html,发现在chrome的手机模拟器里模拟向上滑动没效果,但是console控制台也没有报错,我设置了断点发现js也有执行。

    运行环境: OSX: 10.9.5 Chrome: 42.0.2311.152(64-bit) 项目版本: zepto.fullpage.js v0.3.1

    另外,我在windows下git clone项目直接打开basic.html,发现在chrome的手机模拟器里模拟向上滑动正常。

    question 
    opened by mcattx 7
  • 页面切换底部闪屏问题

    页面切换底部闪屏问题

    把示例中的page样式都改成黑色背景,可以更直观地看到闪屏

    .page1{
        background: black;
    }
    .page2{
        background: black;
    }
    .page3{
        background: black;
    }
    .page4{
        background: black;
    }
    

    上划切换页面,会发现底部有白色闪烁,求解

    question 
    opened by Leeiio 6
  • Android 移动端 Chrome V61 下无法整屏垂直滚动

    Android 移动端 Chrome V61 下无法整屏垂直滚动

    滚动时不能整屏翻滚。 通过远程调试看到 console 出现 warning:

    [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    help wanted 
    opened by g8up 4
  • 某页禁止下滑只能点击某个按钮跳到下一页。

    某页禁止下滑只能点击某个按钮跳到下一页。

    问题是什么

    我想在某一个页面禁止下滑,只能点击某个按钮进入下一页。

    beforeChange:function(params){
        if(params.next>params.cur&&params.cur==7){
            return false;
        }
    }
    
    
    //这样写了之后再按钮调用如下JS也跳不到下一页了。请问有其它办法吗?
    $.fn.fullpage.moveNext(true);
    
    help wanted 
    opened by web-oop 3
  • 结合vue router使用的问题

    结合vue router使用的问题

    问题是什么

    使用vue router结合zepto.fullpage进行开发,在page.vue里面初始化,然后返回index.vue,再进入page.vue就不能滑动了,看了一下源码是在fullpage初始化的时候,做了全局变量fullpage是否为null的判断,由于上一次进入page.vue的时候全局变量fullpage已经有值了,所以再次进入没有执行初始化,不知道算不算bug,我添加了destroy方法,将全局变量fullpage改为null,问题解决。 destroy: function() { fullpage = null }

    环境

    • 手机: 任何手机
    • 系统:任何系统
    • 浏览器:任何浏览器
    • zepto版本:1.1
    • zepto.fullpage版本:v0.5.0

    在线例子

    没有例子

    其他

    没有其他信息

    help wanted 
    opened by xing00 5
  • [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive

    [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive

    问题是什么

    demo/basic.html

    环境

    • 手机:
    • 系统:pc
    • 浏览器:chrome 61
    • zepto版本:1.1
    • zepto.fullpage版本:v0.5.0

    在线例子

    如果有请提供在线例子

    其他

    其他信息

    [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See

    enhancement 
    opened by jonnywang 3
  • 建议给容器加上 overflow:hidden

    建议给容器加上 overflow:hidden

    问题是什么

    使用者如果不小心给 容器加上了 overflow: scroll ,会导致一屏滚动不生效。建议加上行内样式,去掉默认的滚动

    环境

    • 手机: 小米6
    • 系统:安卓7.1.1
    • 浏览器:chrome 61
    • zepto版本:1.1
    • zepto.fullpage版本:v0.5.0

    在线例子

    如果有请提供在线例子

    其他

    其他信息

    opened by huyansheng3 0
Owner
颜海镜
公众号: 颜海镜,《React状态管理与同构实战》作者
颜海镜