saber-viewport v0.2.0

发布于 2023-10-15 20:10:06 字数 2338 浏览 0 评论 0 收藏 0

saber-viewport

移动端页面视口管理，提供页面转场功能

Usage

var viewport = require('saber-viewport');
var page;

// 初始化视口
viewport.init('viewport');
// 加载页面
page = viewport.load(url);
// 渲染页面
....
// 使用淡入淡出效果转场页面
page.enter('fadeInOut');

About bar

移动页面顶部或者底部一般都有navigation bar、toolbar之类的，这些部件在页面转场时通常不变化或者特殊变化，通过添加data-viewport-bar与data-name自定义dom属性来支持。

比如现在有三个页面A、B、C，顶部都有navigation bar，前两页面bar样式相同，最后一个页面为详情页面，bar上添加了“返回”按钮，大体就如下这般：

<!-- page A -->
<body>
    <div class="nav" data-viewport-bar="navigation" data-name="main">
        ...
    </div>
</body>

<!-- page B -->
<body>
    <div class="nav" data-viewport-bar="navigation" data-name="main">
        ...
    </div>
</body>

<!-- page C -->
<body>
    <div class="nav" data-viewport-bar="navigation" data-name="detail">
        ...
        <a>返回</a>
    </div>
</body>

通过data-viewport-bar分类页面中不同类型的bar，bar的转场切换只会在同类tab之间进行。data-name表示bar的名称，名称相同的bar转场时不会有变化，而类型相同名称不同的bar之前会有转场效果。

示例中从A切换到B时顶部导航条不会有变化（data-name相同），而从B切换到C时顶部导航条会进行转场效果（data-name不同）。

注：saber-viewport并不控制bar在页面中的位置、样式，这些还是由页面控制。

API

init(ele, options)

初始化视口，ele为DOM元素或者id，options为可选配置参数：

options.transition string 默认转场效果，目前支持slide滑动转场，fadeInOut淡入淡出转场
options.duration number 默认转场动画时长，单位为秒
options.timing string 默认转场过渡速度，取值请参考CSS3中的transition-timing-function

load(string)

创建新页面的容器，返回Page对象。页面的具体渲染需要通过Page.main属性获取容器元素后自行完成

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

列表为空，暂无数据

saber-viewport v0.2.0

saber-viewport

Usage

About bar

API

init(ele, options)

load(string)

Page

Page.main

Page.enter(type, options)

Page.on(eventName, callback)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

saber-viewport v0.2.0

saber-viewport

Usage

About bar

API

init(ele, options)

load(string)

Page

Page.main

Page.enter(type, options)

Page.on(eventName, callback)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。