BindingX 在 Weex 中的实践经验

本文分享了在Weex中使用BindingX的实际经验,重点介绍了引入模块、表达式解析、元素引用及事件类型的注意事项,强调了解决JS与Native Bridge交互导致的动画卡顿问题,并特别提到eventType='timing'时的解绑动画处理和回调函数的使用。
摘要由CSDN通过智能技术生成

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


前言

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


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

一. 使用步骤

1. 引入 bindingX 模块

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

2. 表达式 expression

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

好的,以下是一个简单的使用 BindingX 实现拖动的组件: 1. 首先,在需要使用该组件的页面或组件引入 BindingX: ```javascript import bx from '@uni/BindingX'; ``` 2. 在组件定义一个可拖动的元素: ```html <template> <view class="drag-wrap" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <slot></slot> </view> </template> <style> .drag-wrap { position: absolute; z-index: 999; user-select: none; } </style> ``` 3. 在组件的 script 定义事件处理函数: ```javascript export default { data() { return { startX: 0, startY: 0, translateX: 0, translateY: 0 }; }, methods: { onTouchStart(event) { this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; }, onTouchMove(event) { const moveX = event.touches[0].clientX - this.startX; const moveY = event.touches[0].clientY - this.startY; this.translateX += moveX; this.translateY += moveY; // 更新元素的 transform 属性实现拖动效果 bx.setTransform(this.$refs.drag, [{ translateX: this.translateX }, { translateY: this.translateY }]); this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; }, onTouchEnd(event) { // 拖动结束后,可以通过 BindingX 的动画机制实现元素回位 bx.animate( this.$refs.drag, [ { property: 'transform.translateX', duration: 200, timingFunction: 'easeOutSine', to: 0 }, { property: 'transform.translateY', duration: 200, timingFunction: 'easeOutSine', to: 0 } ] ); } } }; ``` 4. 最后,在需要使用该组件的页面或组件引入并使用该组件: ```html <template> <view> <Drag> <view class="drag-elem">我可以被拖动</view> </Drag> </view> </template> <script> import Drag from '@/components/Drag'; export default { components: { Drag } }; </script> ``` 至此,一个简单的使用 BindingX 实现拖动的组件就完成了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值