@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/mobile/app/pull-refresh/{enhance.vue → has-more.vue}

@@ -6,11 +6,10 @@
     </div>
     <div class="page__content">
       <tiny-pull-refresh
-        :pullUp="pullUpLoad"
-        :pullDown="pullDownRefresh"
-        success-text="刷新成功"
-        animation-duration="500"
-        success-duration="500"
+        v-model="value"
+        :has-more="hasMore"
+        @pullDown="handlerPullDownRefresh"
+        @pullUp="handlerPullUpLoad"
       >
         <div :key="item.name" v-for="item in data">{{ item.label }}</div>
       </tiny-pull-refresh>
@@ -27,31 +26,24 @@ export default {
   },
   data() {
     return {
-      data: [{ label: 'hello pull-refresh' }],
-      pullUpLoad: {
-        handler: () => this.handlerPullUpLoad()
-      },
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index} list data` }
+      }),
+      value: true,
+      hasMore: true
     }
   },
   methods: {
     handlerPullUpLoad() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          this.data.unshift({ label: 'hello pull-refresh up' })
-          resolve(this.data)
-        }, 1000)
-      })
+      setTimeout(() => {
+        this.value = false
+        this.hasMore = false
+      }, 3000)
     },
     handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          this.data.push({ label: 'hello pull-refresh down' })
-          resolve(this.data)
-        }, 1000)
-      })
+      setTimeout(() => {
+        this.value = false
+      }, 3000)
     }
   }
 }
@@ -61,18 +53,21 @@ export default {
 .page__hd {
   padding: 40px;
 }
+
 .page__title {
   font-weight: 400;
   font-size: 21px;
   text-align: left;
 }
+
 .page__desc {
   margin-top: 5px;
   color: #888;
   font-size: 14px;
   text-align: left;
 }
+
 .page__content {
-  height: 250px;
+  height: 350px;
 }
 </style>

package/demos/mobile/app/pull-refresh/loosing-text.vue

@@ -1,10 +1,24 @@
 <template>
-  <tiny-pull-refresh :pullDown="pullDownRefresh" loosing-text="可以了，可以了，别扒拉了！">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
+  <div>
+    <div class="page__hd">
+      <h1 class="page__title">Refresh</h1>
+      <p class="page__desc">刷新</p>
+    </div>
+    <div class="page__content">
+      <tiny-pull-refresh
+        loosing-text="松手刷新"
+        v-model="value"
+        :has-more="hasMore"
+        @pullDown="handlerPullDownRefresh"
+        @pullUp="handlerPullUpLoad"
+      >
+        <div :key="item.name" v-for="item in data">{{ item.label }}</div>
+      </tiny-pull-refresh>
+    </div>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { PullRefresh } from '@opentiny/vue'
 
 export default {
@@ -13,19 +27,48 @@ export default {
   },
   data() {
     return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index} list data` }
+      }),
+      value: true,
+      hasMore: true
     }
   },
   methods: {
+    handlerPullUpLoad() {
+      setTimeout(() => {
+        this.value = false
+        this.hasMore = false
+      }, 3000)
+    },
     handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
+      setTimeout(() => {
+        this.value = false
+      }, 3000)
     }
   }
 }
 </script>
+
+<style scoped>
+.page__hd {
+  padding: 40px;
+}
+
+.page__title {
+  font-weight: 400;
+  font-size: 21px;
+  text-align: left;
+}
+
+.page__desc {
+  margin-top: 5px;
+  color: #888;
+  font-size: 14px;
+  text-align: left;
+}
+
+.page__content {
+  height: 350px;
+}
+</style>

package/demos/mobile/app/pull-refresh/pull-refresh-slot.vue

@@ -1,13 +1,30 @@
 <template>
-  <tiny-pull-refresh :pullDown="pullDownRefresh">
-    <template #loading>
-      <span>loading...</span>
-    </template>
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
+  <div>
+    <div class="page__hd">
+      <h1 class="page__title">Refresh</h1>
+      <p class="page__desc">刷新</p>
+    </div>
+    <div class="page__content">
+      <tiny-pull-refresh
+        v-model="value"
+        :has-more="hasMore"
+        @pullDown="handlerPullDownRefresh"
+        @pullUp="handlerPullUpLoad"
+      >
+        <template #header>
+          <span>refreshing...</span>
+        </template>
+
+        <template #footer>
+          <span>load more...</span>
+        </template>
+        <div :key="item.name" v-for="item in data">{{ item.label }}</div>
+      </tiny-pull-refresh>
+    </div>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { PullRefresh } from '@opentiny/vue'
 
 export default {
@@ -16,19 +33,51 @@ export default {
   },
   data() {
     return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index + 1} list data` }
+      }),
+      value: true,
+      hasMore: true
     }
   },
   methods: {
+    handlerPullUpLoad() {
+      setTimeout(() => {
+        const length = this.data.length
+        for (let i = 1; i <= 10; i++) {
+          this.data.push({ label: `${i + length} list data` })
+        }
+        this.value = false
+      }, 2000)
+    },
     handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
+      setTimeout(() => {
+        this.value = false
+      }, 2000)
     }
   }
 }
 </script>
+
+<style scoped>
+.page__hd {
+  padding: 40px;
+}
+
+.page__title {
+  font-weight: 400;
+  font-size: 21px;
+  text-align: left;
+}
+
+.page__desc {
+  margin-top: 5px;
+  color: #888;
+  font-size: 14px;
+  text-align: left;
+}
+
+.page__content {
+  height: 350px;
+}
+</style>

package/demos/mobile/app/pull-refresh/pull-up-distance.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="page__hd">
+      <h1 class="page__title">Refresh</h1>
+      <p class="page__desc">刷新</p>
+    </div>
+    <div class="page__content">
+      <tiny-pull-refresh
+        v-model="value"
+        :has-more="hasMore"
+        pull-up-distance="30"
+        @pullDown="handlerPullDownRefresh"
+        @pullUp="handlerPullUpLoad"
+      >
+        <div :key="item.name" v-for="item in data">{{ item.label }}</div>
+      </tiny-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PullRefresh } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPullRefresh: PullRefresh
+  },
+  data() {
+    return {
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index} list data` }
+      }),
+      value: true,
+      hasMore: true
+    }
+  },
+  methods: {
+    handlerPullUpLoad() {
+      setTimeout(() => {
+        this.value = false
+        this.hasMore = false
+      }, 3000)
+    },
+    handlerPullDownRefresh() {
+      setTimeout(() => {
+        this.value = false
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page__hd {
+  padding: 40px;
+}
+
+.page__title {
+  font-weight: 400;
+  font-size: 21px;
+  text-align: left;
+}
+
+.page__desc {
+  margin-top: 5px;
+  color: #888;
+  font-size: 14px;
+  text-align: left;
+}
+
+.page__content {
+  height: 350px;
+}
+</style>

package/demos/mobile/app/pull-refresh/pulling-text.vue

@@ -1,10 +1,25 @@
 <template>
-  <tiny-pull-refresh :pullDown="pullDownRefresh" pulling-text="你敢在拉一点么？">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
+  <div>
+    <div class="page__hd">
+      <h1 class="page__title">Refresh</h1>
+      <p class="page__desc">刷新</p>
+    </div>
+    <div class="page__content">
+      <tiny-pull-refresh
+        pull-down-loading-text="刷新中"
+        pull-up-loading-text="加载中"
+        v-model="value"
+        :has-more="hasMore"
+        @pullDown="handlerPullDownRefresh"
+        @pullUp="handlerPullUpLoad"
+      >
+        <div :key="item.name" v-for="item in data">{{ item.label }}</div>
+      </tiny-pull-refresh>
+    </div>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { PullRefresh } from '@opentiny/vue'
 
 export default {
@@ -13,19 +28,48 @@ export default {
   },
   data() {
     return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index} list data` }
+      }),
+      value: true,
+      hasMore: true
     }
   },
   methods: {
+    handlerPullUpLoad() {
+      setTimeout(() => {
+        this.value = false
+        this.hasMore = false
+      }, 3000)
+    },
     handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
+      setTimeout(() => {
+        this.value = false
+      }, 3000)
     }
   }
 }
 </script>
+
+<style scoped>
+.page__hd {
+  padding: 40px;
+}
+
+.page__title {
+  font-weight: 400;
+  font-size: 21px;
+  text-align: left;
+}
+
+.page__desc {
+  margin-top: 5px;
+  color: #888;
+  font-size: 14px;
+  text-align: left;
+}
+
+.page__content {
+  height: 350px;
+}
+</style>