Skip to content

U
uni-app

梦里逆天 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 22
Star 0
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 bb120acd 编写于 作者: 雪洛's avatar 雪洛
浏览文件
操作

docs: 修改bindingX示例

上级 d2499d9d
隐藏空白更改
内联 并排
Showing with 108 addition and 83 deletion
docs/use-weex.md
浏览文件 @ bb120acd
......@@ -386,7 +386,8 @@ Tis:
**代码示例**
```html
```html
<template>
<div class="container">
<div ref="b1" class="btn" style="background-color:#6A1B9A" @click="clickBtn">
......@@ -404,7 +405,7 @@ Tis:
</div>
</template>
<script>
import Binding from 'weex-bindingx';
const Binding = uni.requireNativePlugin('bindingx');
module.exports = {
data: {
isExpanded: false
......@@ -424,49 +425,48 @@ Tis:
let b1 = this.getEl(this.$refs.b1);
let b2 = this.getEl(this.$refs.b2);
let b3 = this.getEl(this.$refs.b3);
Binding.bind({
let main_binding = Binding.bind({
eventType: 'timing',
exitExpression: {
origin: 't>800'
},
exitExpression: 't>800',
props: [{
element: main_image,
property: 'transform.rotateZ',
expression: {
origin: 'easeOutQuint(t,45,0-45,800)'
}
},{
element: main_btn,
property: 'background-color',
expression: {
origin: "evaluateColor('#607D8B','#ff0000',min(t,800)/800)"
}
}]
element: main_image,
property: 'transform.rotateZ',
expression: 'easeOutQuint(t,45,0-45,800)'
}, {
element: main_btn,
property: 'background-color',
expression: "evaluateColor('#607D8B','#ff0000',min(t,800)/800)"
}]
}, function(res) {
if (res.state === 'exit') {
Binding.unbind({
token: main_binding
})
}
});
Binding.bind({
let btn_binding = Binding.bind({
eventType: 'timing',
exitExpression: {
origin: 't>800'
},
exitExpression: 't>800',
props: [{
element: b1,
property: 'transform.translateY',
expression: {
origin: "easeOutQuint(t,-150,150,800)"
}
},{
element: b2,
property: 'transform.translateY',
expression: {
origin: "t<=100?0:easeOutQuint(t-100,-300,300,700)"
}
},{
element: b3,
property: 'transform.translateY',
expression: {
origin: "t<=200?0:easeOutQuint(t-200,-450,450,600)"
}
}]
element: b1,
property: 'transform.translateY',
expression: "easeOutQuint(t,-150,150,800)"
}, {
element: b2,
property: 'transform.translateY',
expression: "t<=100?0:easeOutQuint(t-100,-300,300,700)"
}, {
element: b3,
property: 'transform.translateY',
expression: "t<=200?0:easeOutQuint(t-200,-450,450,600)"
}]
}, function(res) {
if (res.state === 'exit') {
Binding.unbind({
token: btn_binding
})
}
})
},
expand: function() {
......@@ -475,49 +475,47 @@ Tis:
let b1 = this.getEl(this.$refs.b1);
let b2 = this.getEl(this.$refs.b2);
let b3 = this.getEl(this.$refs.b3);
Binding.bind({
let main_binding = Binding.bind({
eventType: 'timing',
exitExpression: {
origin: 't>100'
},
exitExpression: 't>100',
props: [{
element: main_image,
property: 'transform.rotateZ',
expression: {
origin: 'linear(t,0,45,100)'
}
},{
element: main_btn,
property: 'background-color',
expression: {
origin: "evaluateColor('#ff0000','#607D8B',min(t,100)/100)"
}
}]
element: main_image,
property: 'transform.rotateZ',
expression: 'linear(t,0,45,100)'
}, {
element: main_btn,
property: 'background-color',
expression: "evaluateColor('#ff0000','#607D8B',min(t,100)/100)"
}]
}, function(res) {
if (res.state === 'exit') {
Binding.unbind({
token: main_binding
})
}
});
Binding.bind({
let btn_binding = Binding.bind({
eventType: 'timing',
exitExpression: {
origin: 't>800'
},
exitExpression: 't>800',
props: [{
element: b1,
property: 'transform.translateY',
expression: {
origin: "easeOutBounce(t,0,0-150,800)"
}
}, {
element: b2,
property: 'transform.translateY',
expression: {
origin: "t<=100?0:easeOutBounce(t-100,0,0-300,700)"
}
}, {
element: b3,
property: 'transform.translateY',
expression: {
origin: "t<=200?0:easeOutBounce(t-200,0,0-450,600)"
}
}]
element: b1,
property: 'transform.translateY',
expression: "easeOutBounce(t,0,0-150,800)"
}, {
element: b2,
property: 'transform.translateY',
expression: "t<=100?0:easeOutBounce(t-100,0,0-300,700)"
}, {
element: b3,
property: 'transform.translateY',
expression: "t<=200?0:easeOutBounce(t-200,0,0-450,600)"
}]
}, function(res) {
if (res.state === 'exit') {
Binding.unbind({
token: btn_binding
})
}
})
},
clickBtn: function(e) {
......@@ -532,12 +530,39 @@ Tis:
}
</script>
<style>
.container {flex: 1;}
.image {width: 60px;height: 60px;}
.text {color: #ffffff;font-size: 30px;}
.btn {width: 100px;height: 100px;background-color: #ff0000;align-items: center;justify-content: center;position: absolute;border-radius: 50px;bottom: 25px;right: 25px;}
</style>
.container {
flex: 1;
}
.image {
width: 60px;
height: 60px;
}
.text {
color: #ffffff;
font-size: 30px;
}
.btn {
width: 100px;
height: 100px;
background-color: #ff0000;
align-items: center;
justify-content: center;
position: absolute;
border-radius: 50px;
bottom: 25px;
right: 25px;
}
</style>
```
**注意**
- 推荐`bindingx`引入方式`uni.requireNativePlugin('bindingx')`
- 暂时不要在`expression`内使用`origin`
## nvue 里使用 HTML5Plus API
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或