BindingX 在 Weex 中的实践经验

按照官网无法完成使用出 BindingX，搜集资料加实践，把注意点总结下

---

前言

BindingX 解决了 JS 与 Native Bridge 频繁交互导致的动画卡顿。

---

这是我人生第一篇技术博客，欢迎大家补充知识，批评指正，共同进步！

一. 使用步骤

1. 引入 bindingX 模块

const BindingX = weex.requireModule('bindingx');

2. 表达式 expression

expression：按照官网文档无法在 weex 中应用，而要加 parse(expression) 将表达式解析后传入 native，native 才能明白。

import { parse } from 'bindingx-parser';

3. element 和 anchor

要操作的视图引用是要精确到 id，如一个 ref=“foo” 的 dom 元素，则取引用方式 this.$refs.foo.ref

二. eventType = ‘timing’

• 解绑动画

e => {
       if (e.state === 'end' || e.state === 'exit') return;
       // 解除动画
       BindingX.unbind({ token: gesTokenObj.token, eventType: 'timing' 
      });

• 要写回调函数

总结

本周末专注学 weex 动画，持续补充内容，敬请期待！

• bindingX 改变的是 dom 真实属性
• 回调里的 deltaX、deltaY 是相对值