快速开始

优质

小牛编辑

116浏览

2023-12-01

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

前置条件

学习如何使用 weex 或者 ReactNative 搭建页面;
在您的Android或者iOS工程中，添加 BindingX 组件依赖，并注册组件。

第一步: 安装依赖

安装npm依赖

$ npm install weex-bindingx --save

在JS代码中引入BindingX模块

import BindingX from weex-bindingx;

第二步: 编写表达式

根据业务场景，选择您需要的EventType。比如，要监听手势，evenType值为pan，监听滚动容器scrollOffset变化，eventType值为scroll。
根据交互行为，选择要改变的属性，并编写相应的表达式。比如，交互行为是"用户横滑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使用了，更多内容可以参考其他教程。