滚动条 - SUI 移动开发UI库

返回介绍

滚动条

发布于 2017-06-13 字数 5871 浏览 1123 评论 0

因为部分低版本安卓机型上,如果一个容器通过 position: absolute; 或者 transform: translate3d(x,x,x); 定位,那么在滚动的时候有可能会出现闪烁问题。

为了解决这种bug,我们实现了原生滚动和JS滚动条两种模式,并且可以自由切换。从 v0.3.1 版本开始,默认的滚动条类型就是 “native” ,即默认使用系统原生滚动条。只有当你发现页面存在滚动闪烁的问题无法解决时,才建议使用 js 滚动条。

为了保证页面在任何滚动条模式下都能使用,强烈建议在任何导致页面高度变化的操作之后都要执行一次 $.refreshScroller() 操作。否则在js滚动条模式下可能会导致页面没有重现计算高度而无法滚动。

<header class="bar bar-nav">
        <h1 class="title">滚动条</h1>
    </header>
    <div class="content">
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式:</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动(默认)</li>
                        <li>2. js模式: 总是使用js滚动(即IScroll)</li>
                        <li>3. native模式: 总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式:</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动(默认)</li>
                        <li>2. js模式: 使用js滚动</li>
                        <li>3. native模式: 总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式:</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动(默认)</li>
                        <li>2. js模式: 使用js滚动</li>
                        <li>3. native模式:总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

js 模式是为了解决一些原生滚动条下很难解决的问题。如果你的页面内容比较简单,没有用到幻灯片、滑动删除等复杂的组件,完全不需要使用 js 模式。并且JS模式滚动性能是比原生滚动条差的。

注意,在 js 模式下,或者 auto模式自动切换到js模式下,如果你的 .content 中不存在 .content-inner,那么JS滚动条会自动增加一个 .content-inner容器用来滚动页面,这会导致 .content 中所有的元素都被重写一遍,这个重写操作是在 pageInit 事件触发之前就完成了。你可以自己在 .content 容器下面再套一层 .content-inner容器来防止重写html。

滚动条初始化

一般情况下你不需要自行初始化滚动条,因为 $.init()方法会自动初始化滚动条。如果你希望自行初始化,可以这样:

$(function() {
    $(".content").scroller({
        type: 'js'
    });
});

滚动的方式可以通过配置项 type 来进行配置:

  • 1. auto: ios版本小于6.0.0和android版本小于4.4.0使用js滚动,其他使用native的滚动条
  • 2. js: 都使用js的滚动条,不建议选择此选项
  • 3. native: 直接使用native的滚动条,如果页面没有复杂的布局(比如 position: absolute或者 translate3D)那么可以选择此类型

上边demo使用的是javascript接口的调用方式,scroller.js 同时提供data-api的模式。通过添加标签属性 data-toggle="scroller"。 滚动类型通过:data-type="auto"来配置。

你可以在 .content 容器上通过 data-type='native' 指定在当前页面使用原生滚动条。

注意: scroller 插件会页面载入完成后,默认初始化带有class.content或者属性data-toggle="scroller"的元素为auto模式的滚动条。如果想要.content的元素全部初始为js的模式,需要在.content 标签加上属性data-type="js"

重置滚动

在js模式下,滚动区域高度发生变化时,需要对滚动条进行刷新,scroller 提供两种方式来进行刷新:

1. 局部刷新,只针对某个容器的刷新

$(function() {
    $(".content").scroller('refresh');
});

2. 全局刷新,会刷新页面上所有的滚动条

$(function() {
    $.refreshScroller();
});

滚动接口

scroller插件重置的了zepto的滚动方法,无论在js模式下或者native模式下都是一样的调用方式:

$(function() {
    $('.content').scrollTop(); //==> number
    $('.content').scrollTop(number); // ==>self
    $('.content').scrollLeft(); //==> number
    $('.content').scrollLeft(number); // ==>self
});

滚动事件

滚动条提供三个事件:

  • 1. scrollStart: 滚动开始时触发(目前只能在js模式下,才会触发)
  • 2. scroll: 滚动中触发
  • 3. scrollEnd: 滚动结束后触发(目前只能在js模式下,才会触发)

直接通过下边的方式进行监听

$(function() {
    $(".content").on('scrollStart',function(){
     //dosomething
    });
});

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

目前还没有任何评论,快来抢沙发吧!