文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
快速开始
本文将向您介绍如何使用 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使用了,更多内容可以参考其他教程。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论