diff --git a/pages/template/custom-refresher/custom-refresher.uvue b/pages/template/custom-refresher/custom-refresher.uvue
index ed282cfea79a455907ae03e63724ef0c098277f1..5f6713744c3b7e5af3e72de347b4249189a4e467 100644
--- a/pages/template/custom-refresher/custom-refresher.uvue
+++ b/pages/template/custom-refresher/custom-refresher.uvue
@@ -1,84 +1,90 @@
-<template>
-  <scroll-view class="scroll-view"
-      :refresher-enabled="true" :refresher-triggered="refresherTriggered" refresher-default-style="none"
-      @refresherpulling="onRefresherpulling"
-      @refresherrefresh="onRefresherrefresh"
-      @refresherrestore="onRefreshrestore"
-      :refresher-threshold="refresherThreshold"
-      refresher-max-drag-distance="200px"
-  >
-    <view v-for="i in 20" class="content-item">
-      <text class="text">item-{{i}}</text>
-    </view>
-    <refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
-  </scroll-view>
-</template>
+<template>
+  <list-view class="list-view" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
+    refresher-default-style="none" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"
+    @refresherrestore="onRefreshrestore" :refresher-threshold="refresherThreshold" refresher-max-drag-distance="200px">
 
-<script>
-  import refreshBox from './refresh-box/refresh-box.uvue';
-  export default {
-    components:{refreshBox},
-    data() {
-      return {
-        refresherTriggered:false,
-        refresherThreshold:40,
-        pullingDistance:0,
-        resetting: false
-      }
-    },
-    computed:{
-      state():number{
-        if (this.resetting) {
-          return 3;
-        }
-        if(this.refresherTriggered){
-          return 2
-        }
-        if(this.pullingDistance > this.refresherThreshold){
-          return 1
-        }else{
-          return 0
-        }
-      }
-    },
-    methods: {
-      onRefresherpulling(e:RefresherEvent){
-        // console.log('onRefresherpulling',e.detail.dy)
-        this.pullingDistance = e.detail.dy
-      },
-      onRefresherrefresh(){
-        this.refresherTriggered = true
-        setTimeout(()=>{
-          this.refresherTriggered = false
-          this.resetting = true
-        },1500)
-      },
-      onRefreshrestore() {
-        this.pullingDistance = 0
-      	this.resetting = false;
+    <sticky-header>
+      <view class="header">
+        <text>sticky header</text>
+      </view>
+    </sticky-header>
+    <list-item v-for="i in 20" class="content-item">
+      <text class="text">item-{{i}}</text>
+    </list-item>
+    <refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
+  </list-view>
+</template>
+
+<script>
+  import refreshBox from './refresh-box/refresh-box.uvue';
+  export default {
+    components: { refreshBox },
+    data() {
+      return {
+        refresherTriggered: false,
+        refresherThreshold: 40,
+        pullingDistance: 0,
+        resetting: false
+      }
+    },
+    computed: {
+      state() : number {
+        if (this.resetting) {
+          return 3;
+        }
+        if (this.refresherTriggered) {
+          return 2
+        }
+        if (this.pullingDistance > this.refresherThreshold) {
+          return 1
+        } else {
+          return 0
+        }
+      }
+    },
+    methods: {
+      onRefresherpulling(e : RefresherEvent) {
+        // console.log('onRefresherpulling',e.detail.dy)
+        this.pullingDistance = e.detail.dy
+      },
+      onRefresherrefresh() {
+        this.refresherTriggered = true
+        setTimeout(() => {
+          this.refresherTriggered = false
+          this.resetting = true
+        }, 1500)
+      },
+      onRefreshrestore() {
+        this.pullingDistance = 0
+        this.resetting = false;
       }
     }
   }
 </script>
 
 <style>
-.scroll-view {
-  flex: 1;
-  padding: 5px 15px;
-  background-color: #f5f5f5;
-}
-
-.content-item {
-  padding: 15px;
-  margin: 5px 0;
-  background-color: #fff;
-  border-radius: 5px;
-}
+  .list-view {
+    flex: 1;
+    background-color: #f5f5f5;
+  }
 
-.text {
-  font-size: 14px;
-  color: #666;
-  line-height: 20px;
-}
+  .header {
+    justify-content: center;
+    height: 50px;
+    background-color: #f5f5f5;
+    padding: 15px;
+  }
+
+  .content-item {
+    padding: 15px;
+    margin: 5px 0;
+    background-color: #fff;
+    border-radius: 5px;
+  }
 
+  .text {
+    font-size: 14px;
+    color: #666;
+    line-height: 20px;
+  }
 </style>