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

saber-viewport v0.2.10

发布于 2023-10-15 20:10:06 字数 4662 浏览 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在页面中的位置、样式，这些还是由页面控制。

About Fixed

转场操作时position:fixed的元素会影响转场效果（特别是在使用transform进行转场时，参考webkit-css-transform3d-position-fixed-issue, The Transform Rendering Model），saber-viewport支持使用data-viewport-fixed标注fixed元素，在转场时进行自动处理，比如：

<div class="search" data-viewport-fixed><input type="text"><a class="search-btn">Search</a></div>

已经被data-viewport-bar标记的fixed元素不再需要重复标记data-viewport-fixed

API

init(ele, options)

初始化视口

  • ele {HTMLElement} 视图主元素或者元素id
  • options {Object=} 全局配置参数
  • options.transition {boolean|string=} 转场效果，boolean参数表示是否启用转场效果，string参数表示具体的转场效果，目前支持slide滑动转场，fadeInOut淡入淡出转场，默认为true，表示启动转场效果，但不指定默认的转场效果
  • options.duration {number=} 转场动画时长，单位为秒，默认为0.3
  • options.timing {string=} 转场缓动效果，取值请参考CSS3中的transition-timing-function，默认为'ease'
  • options.transform {boolean=} 是否使用css transform进行转场设置，默认为true
  • options.mask {boolean=} 转场动画进行时使用全局遮罩浮层，防止由于页面操作意外终止转场动画，默认为true
  • options.resetScroll {boolean=} 转场是否启用页面scroll修正，默认为true

load(string)

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

Page

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

Page.main

页面的容器元素

Page.enter(type, options)

启动页面转场

  • type {boolean|string} 转场效果，boolean参数表示是否启用转场效果，string参数表示具体的转场效果
  • options {object=} 转场效果配置
  • options.duration {number=} 转场动画时长，单位为秒
  • options.timing {string=} 转场缓动效果，取值请参考CSS3中的transition-timing-function
  • options.transform {boolean=} 是否使用css transform进行转场设置

Page.on(eventName, callback)

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

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

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

后景页：待转入的页面

===

Saber

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

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

发布评论

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