weex-bindingx-without-parser
Install
$ npm install weex-bindingx-without-parser --save
Usage
import bindingx from 'weex-bindingx-without-parser';
API
Methods
name | args | returns | description |
---|---|---|---|
prepare | {object} options | {object} | prepare bindingx |
bind | {object} options | {object} | bind an expression |
unbind | {object} options | void | unbind an expression |
unbindAll | void | unbind for all |
Arguments Introduction
options
anchor {ElementReference|HTMLElement}
- element to trigger the animation ,
- pass the element in web,such as
findDOMNode(this.refs.block)
- pass the element ref in weex,
findDOMNode(this.refs.block).ref
- pass the element in web,such as
eventType {String}
- pass the type of event to trigger the binding, like
scroll
,pan
,timing
,orientation
instanceId {String}
- pass the instanceId in weex, you can use
document.id
to get it,you should't pass it in web
options {Object}
- option configs for binding
- touchAction (web support only) ,you can pass
auto
orpan-x
orpan-y
,default value isauto
- thresholdX (web support only) default value is
10
,it means thepanstart
event won't be triggerred until the distance of touchmove>10
- thresholdY (web support only) default value is
10
- touchActionRatio (web support only) default value is
0.5
, it means the ratio of width/height
- touchAction (web support only) ,you can pass
props {Array}
- elements for animation
- element {ElementReference|HTMLElement}
- expression {String|Object}
- origin {String} bindingx expression
- transformed {String}
- property {String} property for animation
- instanceId
Example
RAX
import createElement Component render from 'rax';import bindingx from 'weex-bindingx';import View from 'rax-view';import isWeex from 'universal-env'; { return isWeex ? ref : ;} x = 0; y = 0; { this; } { this; } { let blockEl = ; let token = bindingx; } { return <View = ="block" =>block</View> } ;
Vue
<template>
<scroller class="scroller" >
<div :ref="'box'" class="box" @touchstart="ontouchstart" @appear="onappear"></div>
</scroller>
</template>
<style scoped>
.scroller {
flex: 1;
}
.box {
border-width: 2px;
border-style: solid;
border-color: #BBBBBB;
width: 250px;
height: 250px;
margin-top: 250px;
margin-left: 250px;
background-color: #EEEEEE;
margin-bottom:500px;
}
</style>
<script>
import {isWeex} from 'universal-env';
import bindingx from 'weex-bindingx';
function getEl(el) {
if (typeof el === 'string' || typeof el === 'number') return el;
return isWeex ? el.ref : el instanceof HTMLElement ? el : el.$el;
}
export default {
data () {
return {
x: 0,
y: 0,
flag: 0
}
},
methods: {
onappear () {
this.bind();
},
bind () {
var box = getEl(this.$refs.box);
bindingx.bind({
anchor: box,
eventType: 'pan',
props: [
{
element: box,
property: 'transform.translateX',
expression: {
origin: `x+${this.x}`,
transformed: `{\"type\":\"+\",\"children\":[{\"type\":\"Identifier\",\"value\":\"x\"},{\"type\":\"NumericLiteral\",\"value\":\"${this.x}\"}]}`
}
},
{
element: box,
property: 'transform.translateY',
expression: {
origin: `y+${this.y}`,
transformed: `{\"type\":\"+\",\"children\":[{\"type\":\"Identifier\",\"value\":\"y\"},{\"type\":\"NumericLiteral\",\"value\":\"${this.y}\"}]}`
}
}
]
}, (e) => {
if (e.state === 'end') {
this.x += e.deltaX;
this.y += e.deltaY;
}
});
},
ontouchstart (event) {
this.bind();
}
}
}
</script>