返回介绍
文江博客 开发文档 Saber 中文文档 文章详情

saber-viewport v0.2.6

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

saber-viewport

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

Usage

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

// 引入转场效果
require('saber-viewport/transition/fadeInOut');

// 初始化视口
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
  • options.transform boolean 是否默认使用css transform进行转场设置，默认为true。
  • options.loading boolean|string|Function 转场时加载提示文案，在调用load与Page.enter之间出现，默认为false不显示，为Function时回调函数的参数为提示文案的容器元素，具体请参见demo/loading.html

注：当使用transform优化转场效果时需要注意容器内的position:fixed元素，请参考issue, The Transform Rendering Model

load(string)

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

Page

页面对象，由load()方法创建、返回

Page.main

页面的容器元素

Page.enter(type, options)

页面转场，type转场效果，可选；options转场效果配置参数，可选

Page.on(eventName, callback)

注册页面事件，可选择的eventName如下：

  • beforeleave 前景页转出前事件
  • beforeenter 后景页转入前事件
  • afterleave 前景页转出完成事件
  • afterenter 后景页转入完成事件

前景页：当前显示、待转出的页面

后景页：待转入的页面

===

Saber

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

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文