feat(ohos): demo RefreshWrapper

driver/js/examples/hippy-vue-demo/src/components/demos/demo-list.vue

@@ -1,5 +1,15 @@
 <template>
   <div id="demo-list">
+  <ul-refresh-wrapper
+        ref="header"
+        style="flex:1;"
+        @refresh="onRefresh"
+      >
+        <ul-refresh class="refresh-header">
+          <p class="refresh-text">
+            {{ refreshText }}
+          </p>
+        </ul-refresh>
     <ul
       id="list"
       ref="list"
@@ -77,6 +87,7 @@
         />
       </li>
     </ul>
+  </ul-refresh-wrapper>
     <div
       v-if="Vue.Native.Platform === 'android'"
       :style="{
@@ -152,20 +163,41 @@ const mockDataArray = [
 export default {
   data() {
     return {
+      isRefreshing: false,
       Vue,
       loadingState: 'Loading now...',
       dataSource: [],
       delText: 'Delete',
       horizontal: undefined,
     };
   },
+  computed: {
+    refreshText() {
+      return this.isRefreshing ? '正在刷新' : '下拉刷新';
+    },
+  },
   mounted() {
     // onEndReach 位于屏幕底部时会多次触发，
     // 所以需要加一个锁，当未加载完成时不进行二次加载
     this.isLoading = false;
     this.dataSource = mockDataArray;
   },
   methods: {
+    mockFetchData() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          return resolve([]);
+        }, 600);
+      });
+    },
+    async onRefresh() {
+     // 重新获取数据
+     this.isRefreshing = true;
+     const dataSource = await this.mockFetchData();
+     this.isRefreshing = false;
+     // this.dataSource = dataSource.reverse();
+     this.$refs.header.refreshCompleted();
+   },
     changeDirection() {
       this.horizontal = this.horizontal === undefined ? true : undefined;
     },
@@ -232,6 +264,17 @@ export default {
 </script>
 
 <style scoped>
+  #demo-list .refresh-header {
+    background-color: #40b883;
+  }
+
+  #demo-list .refresh-text {
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: white;
+  }
+
   #demo-list {
     collapsable: false;
     flex: 1;

framework/examples/android-demo/res/vue2/vendor-manifest.json

@@ -1 +1 @@
-{"name":"hippyVueBase","content":{"../../packages/hippy-vue-native-components/dist/index.js":{"id":"../../packages/hippy-vue-native-components/dist/index.js","buildMeta":{"exportsType":"namespace","providedExports":["AnimationComponent","DialogComponent","ListRefreshComponent","PullsComponents","SwiperComponent","WaterfallComponent","default"]}},"../../packages/hippy-vue/dist/index.js":{"id":"../../packages/hippy-vue/dist/index.js","buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/process/browser.js":{"id":"./node_modules/process/browser.js","buildMeta":{"providedExports":true}},"./node_modules/setimmediate/setImmediate.js":{"id":"./node_modules/setimmediate/setImmediate.js","buildMeta":{"providedExports":true}},"./node_modules/timers-browserify/main.js":{"id":"./node_modules/timers-browserify/main.js","buildMeta":{"providedExports":true}},"./node_modules/webpack/buildin/global.js":{"id":"./node_modules/webpack/buildin/global.js","buildMeta":{"providedExports":true}},"./scripts/vendor.js":{"id":"./scripts/vendor.js","buildMeta":{"providedExports":true}}}}
+{"name":"hippyVueBase","content":{"./node_modules/@hippy/vue-native-components/dist/index.js":{"id":"./node_modules/@hippy/vue-native-components/dist/index.js","buildMeta":{"exportsType":"namespace","providedExports":["AnimationComponent","DialogComponent","ListRefreshComponent","PullsComponents","SwiperComponent","WaterfallComponent","default"]}},"./node_modules/@hippy/vue/dist/index.js":{"id":"./node_modules/@hippy/vue/dist/index.js","buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/process/browser.js":{"id":"./node_modules/process/browser.js","buildMeta":{"providedExports":true}},"./node_modules/setimmediate/setImmediate.js":{"id":"./node_modules/setimmediate/setImmediate.js","buildMeta":{"providedExports":true}},"./node_modules/timers-browserify/main.js":{"id":"./node_modules/timers-browserify/main.js","buildMeta":{"providedExports":true}},"./node_modules/webpack/buildin/global.js":{"id":"./node_modules/webpack/buildin/global.js","buildMeta":{"providedExports":true}},"./scripts/vendor.js":{"id":"./scripts/vendor.js","buildMeta":{"providedExports":true}}}}