diff --git a/UI/RefreshContainer/README.md b/UI/RefreshContainer/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..89938b1c4617d6db0a4987f467f4caacf01a6368
--- /dev/null
+++ b/UI/RefreshContainer/README.md
@@ -0,0 +1,14 @@
+# RefreshContainer<a name="EN-US_TOPIC_0000001129815618"></a>
+
+##### Introduction<a name="section104mcpsimp"></a>
+
+This sample shows the  **<refresh\>**  component in the JavaScript UI framework. You can use this component to refresh the content in child components and customize the conditions to trigger a refresh.
+
+##### Usage<a name="section107mcpsimp"></a>
+
+On the home screen of the sample app, a refresh icon is displayed when you swipe down the list. After the refresh is complete, two more items are displayed.
+
+##### Constraints<a name="section110mcpsimp"></a>
+
+This sample can only be run on standard-system devices.
+
diff --git a/UI/RefreshContainer/README_zh.md b/UI/RefreshContainer/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..bd2fdff36851e84873427ca7f26b5f758a3601c3
--- /dev/null
+++ b/UI/RefreshContainer/README_zh.md
@@ -0,0 +1,14 @@
+# 下拉刷新容器<a name="ZH-CN_TOPIC_0000001129815618"></a>
+
+##### 简介<a name="section104mcpsimp"></a>
+
+本示例展示了JS UI框架中refresh组件的使用方法，refresh组件可以刷新子组件中的内容，并且可以自定义触发条件。
+
+##### 使用说明<a name="section107mcpsimp"></a>
+
+进入应用后，下拉列表出现刷新图标，刷新结束后，新增两个ltem。
+
+##### 约束与限制<a name="section110mcpsimp"></a>
+
+本示例仅支持在标准系统上运行。
+
diff --git a/UI/RefreshContainer/build.gradle b/UI/RefreshContainer/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..d45348af3401adb65bea584cb8e04da996b29edd
--- /dev/null
+++ b/UI/RefreshContainer/build.gradle
@@ -0,0 +1,36 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+}
+
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.4.3-RC'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+}
diff --git a/UI/RefreshContainer/entry/build.gradle b/UI/RefreshContainer/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..41fab7380560292547ee899fd231951bb37fad92
--- /dev/null
+++ b/UI/RefreshContainer/entry/build.gradle
@@ -0,0 +1,18 @@
+apply plugin: 'com.huawei.ohos.hap'
+
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+    supportSystem "standard"
+}
+
diff --git a/UI/RefreshContainer/entry/src/main/config.json b/UI/RefreshContainer/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..b06a733a86863b2539e91139c758ad1553754042
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/config.json
@@ -0,0 +1,56 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.refreshcontainer",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.refreshcontainer",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.refreshcontainer.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "name": "ohos.samples.refreshcontainer.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "label": "$string:app_name",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/RefreshContainer/entry/src/main/js/default/app.js b/UI/RefreshContainer/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e47afff13e928a74fdcc01a108e4422404b9ac9
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/js/default/app.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    onCreate() {
+        console.info('AceApplication onCreate');
+    },
+    onDestroy() {
+        console.info('AceApplication onDestroy');
+    }
+};
diff --git a/UI/RefreshContainer/entry/src/main/js/default/i18n/en-US.json b/UI/RefreshContainer/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..116476a371423a15576e34f4a64703c85b2eed91
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,5 @@
+{
+  "strings": {
+    "title": "item"
+  }
+}
\ No newline at end of file
diff --git a/UI/RefreshContainer/entry/src/main/js/default/i18n/zh-CN.json b/UI/RefreshContainer/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..a927a6f49f2048d8ef84e050af8cef43f70f010e
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,5 @@
+{
+  "strings": {
+    "title": "元素"
+  }
+}
\ No newline at end of file
diff --git a/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.css b/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..30204e6b7f9f2918b2ef2329c53a510b84b2169e
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #F2F3F5;
+}
+
+.todo-item {
+    height: 48px;
+    font-size: 16px;
+    margin-top: 2px;
+    color: #000000;
+    opacity: 0.9;
+    align-items: center;
+    justify-content: center;
+    margin-left: 12px;
+    margin-right: 12px;
+    background-color: #FFFFFF;
+    flex-direction: column;
+}
+
+.todo-title {
+    width: 450px;
+    height: 40px;
+    text-align: center;
+}
+
+.loading {
+    progress-color: aqua;
+    background-color: lightslategrey;
+}
\ No newline at end of file
diff --git a/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.hml b/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..9c9ba0e6ee2c57c8dfb2a728c289688f2fecba6f
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,24 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <refresh offset="20px" type="pulldown" friction="66" @pulldown="refreshData" class="loading">
+        <list scrolleffect="no">
+            <list-item for="{{ list_item }}" class="todo-item">
+                <text class="todo-title">{{ $item.title }}</text>
+            </list-item>
+        </list>
+    </refresh>
+</div>
diff --git a/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.js b/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f4429e4d08e547ee3a75066d92ffd4d2eb01523f
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    data: {
+        listItem: [
+            {
+                title: " "
+            },
+            {
+                title: " "
+            },
+            {
+                title: " "
+            },
+            {
+                title: " "
+            }
+        ]
+    },
+    onInit() {
+        this.initData()
+    },
+    refreshData: function (refreshing) {
+        if ("end" == refreshing.state) {
+            for (var index = 0; index < 2; index++) {
+                var item = {
+                    title: this.$t('strings.title') + (this.listItem.length + 1)
+                }
+                this.listItem.splice(0, 0, item)
+            }
+        }
+    },
+    initData: function (params) {
+        var index = this.listItem.length
+        for (let todolistKey in this.listItem) {
+            this.listItem[todolistKey].title = this.$t('strings.title') + index
+            index--
+        }
+    }
+}
diff --git a/UI/RefreshContainer/entry/src/main/resources/base/element/string.json b/UI/RefreshContainer/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..84a0e7b79cd6345aa464745311139385f849862f
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "Refresh Container"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/RefreshContainer/entry/src/main/resources/base/media/icon.png b/UI/RefreshContainer/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/UI/RefreshContainer/entry/src/main/resources/base/media/icon.png differ
diff --git a/UI/RefreshContainer/entry/src/main/resources/en/element/string.json b/UI/RefreshContainer/entry/src/main/resources/en/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..d6d3c8a4c812477c84c41ea773e6bde02c89e2ee
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/resources/en/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "Refresh Container"
+    },
+    {
+      "name": "mainability_description",
+      "value": "Java_Empty Ability"
+    }
+  ]
+}
diff --git a/UI/RefreshContainer/entry/src/main/resources/zh/element/string.json b/UI/RefreshContainer/entry/src/main/resources/zh/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..1c23ad0e49287008e1e99c644c0e2b02c7b987fe
--- /dev/null
+++ b/UI/RefreshContainer/entry/src/main/resources/zh/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "刷新容器"
+    },
+    {
+      "name": "mainability_description",
+      "value": "Java_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/RefreshContainer/screenshots/device/after.png b/UI/RefreshContainer/screenshots/device/after.png
new file mode 100644
index 0000000000000000000000000000000000000000..1afb482fb2e69f6560a7cf376298f714dd7d9b7a
Binary files /dev/null and b/UI/RefreshContainer/screenshots/device/after.png differ
diff --git a/UI/RefreshContainer/screenshots/device/refreshing.png b/UI/RefreshContainer/screenshots/device/refreshing.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a0f5172aa055bfe3b8b8049641bf4c99b10ee12
Binary files /dev/null and b/UI/RefreshContainer/screenshots/device/refreshing.png differ
diff --git a/UI/RefreshContainer/settings.gradle b/UI/RefreshContainer/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/UI/RefreshContainer/settings.gradle
@@ -0,0 +1 @@
+include ':entry'