0.0.49 • Published 5 years ago
weex-bindingx v0.0.49
weex-bindingx
Install
$ npm install weex-bindingx --save
Usage
import bindingx from 'weex-bindingx';
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';
function getEl(el){
return isWeex ? findDOMNode(el).ref : findDOMNode(el);
}
class App extends Component {
x = 0;
y = 0;
componentDidMount(){
this.bindEl();
}
onTouchStart(){
this.bindEl();
}
bindEl(){
let blockEl = getEl(this.refs.block);
let token = bindingx.bind({
anchor: blockEl,
eventType: 'pan',
props: [
{
element: blockEl,
property: 'transform.translateX',
expression: `x+${this.x}`
},
{
element: blockEl,
property: 'transform.translateY',
expression: `y+${this.y}`
}]
},(e)=>{
if (e.state === 'end') {
this.x += e.deltaX;
this.y += e.deltaY;
}
});
}
render(){
return (<View onTouchStart={(e) => this.onTouchStart(e)} ref="block" style={{
position: 'absolute',
left: 0,
top: 0,
width: 300,
height: 300,
backgroundColor: 'red'
}}>block</View>)
}
}
render(<App />);
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>
0.0.49
5 years ago
0.0.48
6 years ago
0.0.47
6 years ago
0.0.46
6 years ago
0.0.45
6 years ago
0.0.44
6 years ago
0.0.43
6 years ago
0.0.42
6 years ago
0.0.41
6 years ago
0.0.40
6 years ago
0.0.39
6 years ago
0.0.38
6 years ago
0.0.37
6 years ago
0.0.36
6 years ago
0.0.35
6 years ago
0.0.34
6 years ago
0.0.33
6 years ago
0.0.32
6 years ago
0.0.31
6 years ago
0.0.30
6 years ago
0.0.29
6 years ago
0.0.28
6 years ago
0.0.27
6 years ago
0.0.26
6 years ago
0.0.25
6 years ago
0.0.24
6 years ago
0.0.23
6 years ago
0.0.22
6 years ago
0.0.21
6 years ago
0.0.20
6 years ago
0.0.19
6 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago