You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ji...@apache.org on 2017/04/08 09:33:36 UTC
incubator-weex git commit: update doc example about component rect
Repository: incubator-weex
Updated Branches:
refs/heads/dev aa1c41f99 -> 20e9be6b3
update doc example about component rect
Squashed commit of the following:
commit 6519c4bf3dc2f1d8447742cc347a76b6e9b60017
Merge: 56d2151b3 aa1c41f99
Author: acton393 <zh...@gmail.com>
Date: Thu Apr 6 18:06:06 2017 +0800
Merge remote-tracking branch 'upstream/dev' into dev
commit 56d2151b3cddd3e288c95a8712fc1a87f58729c4
Author: acton393 <zh...@gmail.com>
Date: Wed Mar 29 18:07:00 2017 +0800
* [ios] add doc for pulling down event support
commit d07d1c9092f701d8a91dd65b0b5c2db2e8714ebd
Author: acton393 <zh...@gmail.com>
Date: Wed Mar 29 17:50:02 2017 +0800
Revert "* [ios] add pullingdown event support case"
This reverts commit 04d5a528b320fb89acc88e0cdcc1cbffc33d6ae0.
commit b0ec2b039d3a48f487bfabfa15ae5ab97e61f7b1
Merge: 04d5a528b 0d441c06a
Author: acton393 <zh...@gmail.com>
Date: Wed Mar 29 17:47:36 2017 +0800
Merge remote-tracking branch 'upstream/dev' into dev
commit 04d5a528b320fb89acc88e0cdcc1cbffc33d6ae0
Author: acton393 <zh...@gmail.com>
Date: Wed Mar 29 17:47:09 2017 +0800
* [ios] add pullingdown event support case
commit 523ab10711d9839a9f0c89f2c81393f2278e5fb8
Author: acton393 <zh...@gmail.com>
Date: Wed Mar 15 14:42:01 2017 +0800
* [ios] update english doc example
commit 9f5f530af9930dc30fd151561b61aabbf5e472a5
Merge: 22bf16e29 c62bcfecf
Author: acton393 <zh...@gmail.com>
Date: Wed Mar 15 14:35:20 2017 +0800
Merge remote-tracking branch 'upstream/dev' into dev
commit 22bf16e297369d4bcee5b910adec9981a2102b68
Author: acton393 <zh...@gmail.com>
Date: Wed Mar 15 14:26:25 2017 +0800
* [ios] remove unused zip file
commit a99b6842080f353f6e50eb8c733890ddf40ae589
Author: acton393 <zh...@gmail.com>
Date: Wed Mar 15 14:25:54 2017 +0800
* [ios] update doc example about getcomponentRect
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/20e9be6b
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/20e9be6b
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/20e9be6b
Branch: refs/heads/dev
Commit: 20e9be6b3ccbc8ec9d5c62820861723d2e93dec5
Parents: aa1c41f
Author: Jinjiang <zh...@me.com>
Authored: Sat Apr 8 17:30:13 2017 +0800
Committer: Jinjiang <zh...@me.com>
Committed: Sat Apr 8 17:30:13 2017 +0800
----------------------------------------------------------------------
doc/source/cn/references/components/refresh.md | 9 ++-
doc/source/cn/references/modules/dom.md | 75 +++++++++++++++++----
doc/source/examples/dom-rect.md | 73 +++++++++++++++++---
doc/source/references/components/refresh.md | 11 ++-
doc/source/references/modules/dom.md | 75 +++++++++++++++++----
5 files changed, 205 insertions(+), 38 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/20e9be6b/doc/source/cn/references/components/refresh.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/components/refresh.md b/doc/source/cn/references/components/refresh.md
index a6eb6fb..24a5823 100644
--- a/doc/source/cn/references/components/refresh.md
+++ b/doc/source/cn/references/components/refresh.md
@@ -36,7 +36,14 @@ version: 2.1
## \u4e8b\u4ef6
- `refresh`\uff1a \u5f53 `<scroller>`/`<list>` \u88ab\u4e0b\u62c9\u65f6\u89e6\u53d1\u3002
-- `pullingdown`\uff1a\u4ec5\u5728 Android \u652f\u6301\u3002\u5f53 `<scroller>`/`<list>` \u88ab\u4e0b\u62c9\u65f6\u89e6\u53d1\uff0c\u53ef\u4ee5\u4ece\u4e8b\u4ef6\u7684\u53c2\u6570\u5bf9\u8c61\u4e2d\u83b7\u53d6 dy\uff0cheaderHeight\uff0cmaxHeight
+- `pullingdown`<span class="weex-version">v0.6.1+</span>: \u5f53 `<scroller>`/`<list>` \u88ab\u4e0b\u62c9\u65f6\u89e6\u53d1\uff0c\u53ef\u4ee5\u4ece\u4e8b\u4ef6\u7684\u53c2\u6570\u5bf9\u8c61\u4e2d\u83b7\u53d6 dy,pullingDistance, viewHeight, type
+
+ ```
+ dy: \u524d\u540e\u4e24\u6b21\u56de\u8c03\u6ed1\u52a8\u8ddd\u79bb\u7684\u5dee\u503c
+ pullingDistance: \u4e0b\u62c9\u7684\u8ddd\u79bb
+ viewHeight: refreshView \u9ad8\u5ea6
+ type: "pullingdown" \u5e38\u6570\u5b57\u7b26\u4e32
+ ```
## \u7ea6\u675f
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/20e9be6b/doc/source/cn/references/modules/dom.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/modules/dom.md b/doc/source/cn/references/modules/dom.md
index 2fa153a..70eeed2 100644
--- a/doc/source/cn/references/modules/dom.md
+++ b/doc/source/cn/references/modules/dom.md
@@ -144,8 +144,8 @@ version: 2.1
```html
<template>
- <div class="wrapper">
- <div ref="box" class="box">
+ <div class="wrapper" style='margin-top:200px'>
+ <div ref="box" class="box">
<text class="info">Width: {{size.width}}</text>
<text class="info">Height: {{size.height}}</text>
<text class="info">Top: {{size.top}}</text>
@@ -153,11 +153,26 @@ version: 2.1
<text class="info">Left: {{size.left}}</text>
<text class="info">Right: {{size.right}}</text>
</div>
+
+ <text class="info btn" @click='click()'>{{this.tip}}</text>
+
</div>
-</template>
+</template>
<script>
const dom = weex.requireModule('dom')
+
+ function round(size) {
+ var roundSize = {
+ 'width': Math.round(size.width),
+ 'height': Math.round(size.height),
+ 'top': Math.round(size.top),
+ 'bottom': Math.round(size.bottom),
+ 'left': Math.round(size.left),
+ 'right': Math.round(size.right)
+ }
+ return roundSize
+ }
export default {
data () {
@@ -169,26 +184,60 @@ version: 2.1
bottom: 0,
left: 0,
right: 0
- }
+ },
+ ref:"viewport",
+ tip:"get box rect"
}
},
mounted () {
- const result = dom.getComponentRect(this.$refs.box, option => {
+ const result = dom.getComponentRect(this.ref, option => {
console.log('getComponentRect:', option)
- this.size = option.size
+ this.size = round.call(this,option.size);
})
- console.log('return value:', result)
- console.log('viewport:', dom.getComponentRect('viewport'))
+ },
+
+ methods:{
+ click:function() {
+ if (this.ref === 'viewport') {
+ this.ref = this.$refs.box;
+ this.tip = "get viewport rect"
+ } else {
+ this.ref = 'viewport'
+ this.tip = "get box rect"
+ }
+
+ const result = dom.getComponentRect(this.ref, option => {
+ console.log('getComponentRect:', option)
+ this.size = round.call(this,option.size);
+ })
+ }
}
+
}
</script>
<style scoped>
+ .btn {
+ margin-top:20px;
+ border-width:2px;
+ border-style: solid;
+ border-radius:10px;
+ width:300px;
+ margin-left:170px;
+ padding-left:35px;
+ border-color: rgb(162, 217, 192);
+
+ }
+ .btn:active {
+ background-color: #8fbc8f;
+ border-color: gray;
+ }
+
.box {
- margin-top: 200px;
+ align-items:center;
margin-left: 150px;
- width: 450px;
- height: 450px;
+ width: 350px;
+ height: 400px;
background-color: #DDD;
border-width: 2px;
border-style: solid;
@@ -197,13 +246,15 @@ version: 2.1
}
.info {
font-size: 40px;
+ top:30px;
+ margin-left:20px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #41B883;
}
</style>
```
-[try it](http://dotwe.org/vue/87d4ed571de129ab28052b06a5d65fc8)
+[try it](http://dotwe.org/vue/d069a9bf0f0781b914f12a9a7b9a1447)
## \u5176\u4ed6
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/20e9be6b/doc/source/examples/dom-rect.md
----------------------------------------------------------------------
diff --git a/doc/source/examples/dom-rect.md b/doc/source/examples/dom-rect.md
index 9703f69..9b786ba 100644
--- a/doc/source/examples/dom-rect.md
+++ b/doc/source/examples/dom-rect.md
@@ -7,8 +7,8 @@ web_bundle_url: ../js/examples/dom-rect.web.js
```html
<template>
- <div class="wrapper">
- <div ref="box" class="box">
+ <div class="wrapper" style='margin-top:200px'>
+ <div ref="box" class="box">
<text class="info">Width: {{size.width}}</text>
<text class="info">Height: {{size.height}}</text>
<text class="info">Top: {{size.top}}</text>
@@ -16,11 +16,26 @@ web_bundle_url: ../js/examples/dom-rect.web.js
<text class="info">Left: {{size.left}}</text>
<text class="info">Right: {{size.right}}</text>
</div>
+
+ <text class="info btn" @click='click()'>{{this.tip}}</text>
+
</div>
-</template>
+</template>
<script>
const dom = weex.requireModule('dom')
+
+ function round(size) {
+ var roundSize = {
+ 'width': Math.round(size.width),
+ 'height': Math.round(size.height),
+ 'top': Math.round(size.top),
+ 'bottom': Math.round(size.bottom),
+ 'left': Math.round(size.left),
+ 'right': Math.round(size.right)
+ }
+ return roundSize
+ }
export default {
data () {
@@ -32,26 +47,60 @@ web_bundle_url: ../js/examples/dom-rect.web.js
bottom: 0,
left: 0,
right: 0
- }
+ },
+ ref:"viewport",
+ tip:"get box rect"
}
},
mounted () {
- const result = dom.getComponentRect(this.$refs.box, option => {
+ const result = dom.getComponentRect(this.ref, option => {
console.log('getComponentRect:', option)
- this.size = option.size
+ this.size = round.call(this,option.size);
})
- console.log('return value:', result)
- console.log('viewport:', dom.getComponentRect('viewport'))
+ },
+
+ methods:{
+ click:function() {
+ if (this.ref === 'viewport') {
+ this.ref = this.$refs.box;
+ this.tip = "get viewport rect"
+ } else {
+ this.ref = 'viewport'
+ this.tip = "get box rect"
+ }
+
+ const result = dom.getComponentRect(this.ref, option => {
+ console.log('getComponentRect:', option)
+ this.size = round.call(this,option.size);
+ })
+ }
}
+
}
</script>
<style scoped>
+ .btn {
+ margin-top:20px;
+ border-width:2px;
+ border-style: solid;
+ border-radius:10px;
+ width:300px;
+ margin-left:170px;
+ padding-left:35px;
+ border-color: rgb(162, 217, 192);
+
+ }
+ .btn:active {
+ background-color: #8fbc8f;
+ border-color: gray;
+ }
+
.box {
- margin-top: 200px;
+ align-items:center;
margin-left: 150px;
- width: 450px;
- height: 450px;
+ width: 350px;
+ height: 400px;
background-color: #DDD;
border-width: 2px;
border-style: solid;
@@ -60,6 +109,8 @@ web_bundle_url: ../js/examples/dom-rect.web.js
}
.info {
font-size: 40px;
+ top:30px;
+ margin-left:20px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #41B883;
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/20e9be6b/doc/source/references/components/refresh.md
----------------------------------------------------------------------
diff --git a/doc/source/references/components/refresh.md b/doc/source/references/components/refresh.md
index 8aaecbb..ed3ef0a 100644
--- a/doc/source/references/components/refresh.md
+++ b/doc/source/references/components/refresh.md
@@ -132,8 +132,15 @@ Other attributes please check out the [common attributes](../common-attrs.html).
common styles: check out [common styles for components](../common-style.html)
### Events
-* onrefresh triggered when the scroller has been pulled down
-* onpullingdown available on Android. triggered when the scroller has been pulled down. you can get dy, headerHeight, maxHeight from onpullingdowns event object.
+* `onrefresh`: triggered when the scroller has been pulled down
+* `onpullingdown`: triggered when the scroller has been pulled down. you can get `dy, pullingDistance, viewHeight, type` from onpullingdown event object.
+
+ ```
+ dy: the differencen between two scroll actions
+ pullingDistance: the distance of pulling
+ viewHeight: the height of refreshView
+ type: "pullingdown" constant string type for this event
+ ```
### Restrictions
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/20e9be6b/doc/source/references/modules/dom.md
----------------------------------------------------------------------
diff --git a/doc/source/references/modules/dom.md b/doc/source/references/modules/dom.md
index cd5651e..cda9fc7 100644
--- a/doc/source/references/modules/dom.md
+++ b/doc/source/references/modules/dom.md
@@ -142,8 +142,8 @@ Example Useage:
```html
<template>
- <div class="wrapper">
- <div ref="box" class="box">
+ <div class="wrapper" style='margin-top:200px'>
+ <div ref="box" class="box">
<text class="info">Width: {{size.width}}</text>
<text class="info">Height: {{size.height}}</text>
<text class="info">Top: {{size.top}}</text>
@@ -151,11 +151,26 @@ Example Useage:
<text class="info">Left: {{size.left}}</text>
<text class="info">Right: {{size.right}}</text>
</div>
+
+ <text class="info btn" @click='click()'>{{this.tip}}</text>
+
</div>
-</template>
+</template>
<script>
const dom = weex.requireModule('dom')
+
+ function round(size) {
+ var roundSize = {
+ 'width': Math.round(size.width),
+ 'height': Math.round(size.height),
+ 'top': Math.round(size.top),
+ 'bottom': Math.round(size.bottom),
+ 'left': Math.round(size.left),
+ 'right': Math.round(size.right)
+ }
+ return roundSize
+ }
export default {
data () {
@@ -167,26 +182,60 @@ Example Useage:
bottom: 0,
left: 0,
right: 0
- }
+ },
+ ref:"viewport",
+ tip:"get box rect"
}
},
mounted () {
- const result = dom.getComponentRect(this.$refs.box, option => {
+ const result = dom.getComponentRect(this.ref, option => {
console.log('getComponentRect:', option)
- this.size = option.size
+ this.size = round.call(this,option.size);
})
- console.log('return value:', result)
- console.log('viewport:', dom.getComponentRect('viewport'))
+ },
+
+ methods:{
+ click:function() {
+ if (this.ref === 'viewport') {
+ this.ref = this.$refs.box;
+ this.tip = "get viewport rect"
+ } else {
+ this.ref = 'viewport'
+ this.tip = "get box rect"
+ }
+
+ const result = dom.getComponentRect(this.ref, option => {
+ console.log('getComponentRect:', option)
+ this.size = round.call(this,option.size);
+ })
+ }
}
+
}
</script>
<style scoped>
+ .btn {
+ margin-top:20px;
+ border-width:2px;
+ border-style: solid;
+ border-radius:10px;
+ width:300px;
+ margin-left:170px;
+ padding-left:35px;
+ border-color: rgb(162, 217, 192);
+
+ }
+ .btn:active {
+ background-color: #8fbc8f;
+ border-color: gray;
+ }
+
.box {
- margin-top: 200px;
+ align-items:center;
margin-left: 150px;
- width: 450px;
- height: 450px;
+ width: 350px;
+ height: 400px;
background-color: #DDD;
border-width: 2px;
border-style: solid;
@@ -195,10 +244,12 @@ Example Useage:
}
.info {
font-size: 40px;
+ top:30px;
+ margin-left:20px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #41B883;
}
</style>
```
-[try it](http://dotwe.org/vue/87d4ed571de129ab28052b06a5d65fc8)
\ No newline at end of file
+[try it](http://dotwe.org/vue/d069a9bf0f0781b914f12a9a7b9a1447)
\ No newline at end of file