feat: 增加自定义下拉刷新属性例子。

pages.json

@@ -788,6 +788,15 @@
 				"enablePullDownRefresh": false
 			}
 		}
+	    ,{
+            "path" : "pages/component/scroll-view/scroll-view-custom-refresher-props",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "自定义下拉刷新的scroll-view属性示例",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"pageOrientation": "portrait",

pages/component/scroll-view/scroll-view-custom-refresher-props.uvue

+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
+		refresher-default-style="none" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh">
+		<!-- #endif -->
+		<scroll-view style="margin: 50rpx;">
+			<view v-for="i in 20" class="content-item">
+				<text class="text">item-{{i}}</text>
+			</view>
+		</scroll-view>
+		<refresh-box slot="refresher" :state="state"></refresh-box>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import RefresherEvent from 'io.dcloud.uniapp.runtime.RefresherEvent';
+	import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';
+	export default {
+		components: { refreshBox },
+		data() {
+			return {
+				refresherTriggered: false,
+				pullingDistance: 0,
+				resetting: false
+			}
+		},
+		computed: {
+			state() : number {
+				if (this.resetting) {
+					return 3;
+				}
+				if (this.refresherTriggered) {
+					return 2
+				}
+				if (this.pullingDistance > 45) {
+					return 1
+				} else {
+					return 0;
+				}
+			}
+		},
+		methods: {
+			onRefresherpulling(e : RefresherEvent) {
+				this.pullingDistance = e.detail.dy;
+				if (this.pullingDistance.toDouble() == 0.0) {
+					this.resetting = false;
+				}
+			},
+			onRefresherrefresh() {
+				this.refresherTriggered = true
+				setTimeout(() => {
+					this.refresherTriggered = false
+					this.resetting = true;
+				}, 1500)
+			},
+		}
+	}
+</script>
+
+<style>
+	.content-item {
+		padding: 15px;
+		margin: 5px 0;
+		background-color: #fff;
+		border-radius: 5px;
+	}
+
+	.text {
+		font-size: 14px;
+		color: #666;
+		line-height: 20px;
+	}
+</style>
\ No newline at end of file

pages/component/scroll-view/scroll-view.uvue

@@ -73,11 +73,15 @@
 		  class="button default-button"
 		  @click="moreProps"
 		>
-		  非下拉刷新的scroll-view属性示例
+		  非下拉刷新的属性示例
 		</button>
 		<view class="uni-common-pb"></view>
 		<button type="primary" class="button default-button" @click="jumpToRefresher">
-			下拉刷新的scroll-view属性示例
+			下拉刷新的属性示例
+		</button>
+		<view class="uni-common-pb"></view>
+		<button type="primary" class="button default-button" @click="jumpToCustomRefresher">
+			自定义下拉刷新的属性示例
 		</button>
 		<view class="uni-common-pb"></view>
       </view>
@@ -133,6 +137,11 @@ export default {
 		  url: '/pages/component/scroll-view/scroll-view-refresher-props',
 		})
 	},
+	jumpToCustomRefresher() {
+		uni.navigateTo({
+		  url: '/pages/component/scroll-view/scroll-view-custom-refresher-props',
+		})
+	}
   },
 }
 </script>

pages/template/custom-refresher/custom-refresher.uvue

@@ -23,11 +23,15 @@
       return {
         refresherTriggered:false,
         refresherThreshold:40,
-        pullingDistance:0
+        pullingDistance:0,
+		resetting: false
       }
     },
     computed:{
       state():number{
+		if (this.resetting) {
+		  return 3;
+		}
         if(this.refresherTriggered){
           return 2
         }
@@ -42,6 +46,9 @@
       onRefresherpulling(e:RefresherEvent){
         // console.log('onRefresherpulling',e.detail.dy)
         this.pullingDistance = e.detail.dy
+		if (this.pullingDistance.toDouble() == 0.0) {
+			this.resetting = false;
+		}
       },
       onRefresherrefresh(){
         this.refresherTriggered = true

pages/template/custom-refresher/refresh-box/refresh-box.uvue

@@ -11,7 +11,7 @@
   export default {
     data() {
       return {
-        text: ['继续下拉执行刷新', '释放立即刷新', '刷新中']
+        text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', ""]
       }
     },
     props: {