返回介绍

快速开始

发布于 2020-01-01 19:51:28 字数 1695 浏览 1670 评论 0 收藏 0

本文将向您介绍如何使用 BindingX 。如果您还不了解 BindingX 的工作原理,强烈建议先阅读文档 《简介》以及 《核心概念》。

前置条件

  1. 学习如何使用 weex 或者 ReactNative 搭建页面;

  2. 在您的Android或者iOS工程中,添加 BindingX 组件依赖,并注册组件。

第一步: 安装依赖

  1. 安装npm依赖

$ npm install weex-bindingx --save
  1. 在JS代码中引入BindingX模块

import BindingX from weex-bindingx;

第二步: 编写表达式

  1. 根据业务场景,选择您需要的EventType。 比如,要监听手势,evenType值为pan,监听滚动容器scrollOffset变化,eventType值为scroll。

  2. 根据交互行为,选择要改变的属性,并编写相应的表达式。比如,交互行为是"用户横滑100单位,透明度从1变化到0"。则属性为"opacity",表达式为"1-x/100"。

第三步: 绑定表达式

根据第二步得到的eventType、Expression以及Property,调用 BindingX 模块的 bind 方法,完成绑定。

 var result = BindingX.bind({
     eventType: 'pan',       ==> 事件类型
     anchor: 'foo',          ==> anchor指的是事件的触发者,如果是eventType是"orientation"或"timing",则不用填
     props: [
         {
             element: view.ref,     ==> 要改变的视图的引用或者id
             expression: "1-x/100", ==> 表达式
             property: "opacity"    ==> 要改变的属性
         }
     ] 
 })

当调用bind方法之后,Native会启动监听,当目标事件(比如手指滑动、设备方向变化等)发生的时候,便会执行您先前绑定的一组或者多组表达式。 bind 方法会返回一个JS对象,其中包含了一个 token 属性,可以使用这个token取消绑定。

第四步: 取消绑定

在合适的时机调用 BindingX 的unbind方法取消绑定。比如,页面不可见或者即将销毁的时候。

BindingX.unbind({
    token: result.token,
    eventType: 'pan'
})

到这里,您已经学会基本的API使用了,更多内容可以参考其他教程。

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

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

发布评论

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