You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by cx...@apache.org on 2017/03/05 11:19:20 UTC
[16/29] incubator-weex git commit: * [ios] add refresh demo
* [ios] add refresh demo
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/c0dce9b6
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/c0dce9b6
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/c0dce9b6
Branch: refs/heads/0.11-dev
Commit: c0dce9b60b5f2ab72ee8fc8d6d5f7b84808348e3
Parents: 0ce0cb5
Author: \u9690\u98ce <cx...@gmail.com>
Authored: Fri Feb 24 19:10:19 2017 +0800
Committer: \u9690\u98ce <cx...@gmail.com>
Committed: Fri Feb 24 19:10:19 2017 +0800
----------------------------------------------------------------------
examples/vue/components/waterfall.vue | 41 ++++++++++++++++++++++++++++++
1 file changed, 41 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c0dce9b6/examples/vue/components/waterfall.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/waterfall.vue b/examples/vue/components/waterfall.vue
index ac34919..7bf42f9 100644
--- a/examples/vue/components/waterfall.vue
+++ b/examples/vue/components/waterfall.vue
@@ -5,6 +5,10 @@
:show-scrollbar="showScrollbar" :scrollable="scrollable"
@scroll="recylerScroll"
>
+ <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
+ <loading-indicator class="indicator"></loading-indicator>
+ <text class="refreshText">{{refreshText}}</text>
+ </refresh>
<header class="header" ref="header" v-if="showHeader">
<image class="banner" src="https://gw.alicdn.com/tps/TB1ESN1PFXXXXX1apXXXXXXXXXX-1000-600.jpg" resize="cover">
<div class="bannerInfo">
@@ -55,6 +59,23 @@
.page {
background-color: #EFEFEF;
}
+ .refresh {
+ height: 128;
+ width: 750;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ }
+ .refreshText {
+ color: #888888;
+ font-weight: bold;
+ }
+ .indicator {
+ color: #888888;
+ height: 40;
+ width: 40;
+ margin-right: 30;
+ }
.header {
}
.banner {
@@ -274,6 +295,8 @@
return {
padding: 0,
+ refreshing: false,
+ refreshText: '\u2193 pull to refresh...',
columnCount: 2,
columnGap: 12,
columnWidth: 'auto',
@@ -408,6 +431,24 @@
} else {
this.items.splice(0, 0, this.items.splice(index, 1)[0]);
}
+ },
+
+ onrefresh (event) {
+ this.refreshing = true
+ this.refreshText = "loading..."
+ setTimeout(() => {
+ this.refreshing = false
+ this.refreshText = '\u2193 pull to refresh...'
+ }, 2000)
+ },
+
+ onpullingdown (event) {
+ // console.log(`${event.pullingDistance}`)
+ if (event.pullingDistance < -64) {
+ this.refreshText = '\u2191 release to refresh...'
+ } else {
+ this.refreshText = '\u2193 pull to refresh...'
+ }
}
}
}