新增scroll-view下拉刷新示例

pages.json

@@ -521,6 +521,14 @@
                 "enablePullDownRefresh": false
             }
 
+        }, {
+		    "path" : "pages/component/scroll-view/scroll-view-refresher",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "scroll-view-refresher",
+		        "enablePullDownRefresh": false
+		    }
+		            
 		}
     ],
     "globalStyle": {

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

+<template>
+	<view class="container">
+		<page-head title="scroll-view 下拉刷新"></page-head>
+		<scroll-view class="scroll" refresher-enabled = true @refresherrefresh="onRefresherrefresh" :refresher-triggered = "refresherTriggered">
+			<view v-for="key in scrollData" :key="key">
+				<view class="scroll-item">
+					<text class="scroll-item-title">{{key}}</text>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+<script>
+	export default {
+
+		data() {
+			return {
+				scrollData: [] as Array <string>,
+				refresherTriggered: false 
+			};
+		},
+		onLoad() {
+			let lists: Array < string > = []
+			for (let i = 0; i < 20; i++) {
+				lists.push("item---"+i)
+			}
+			this.scrollData = lists
+		},
+
+		methods: {
+			onRefresherrefresh(e: RefresherEvent) {
+				console.log("onRefresherrefresh--------------下拉刷新触发")
+				this.refresherTriggered = true
+				setTimeout(function(){
+					this.refresherTriggered = false
+				}, 1500)
+				
+			}
+		}
+	};
+</script>
+
+<style>
+	.container{
+		display: flex;
+		flex-direction: column;
+		border:dashed;
+		flex: 1;
+	}
+	
+	.scroll {
+		background-color: #eee;
+		position: relative;
+		width: 100%;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		border-color: red;
+	}
+	
+	.scroll-item {
+	    margin-left: 12rpx;
+	    margin-right: 12rpx;
+	    margin-top: 12rpx;
+		background-color: #fff;
+	    border-radius: 8rpx;
+	}
+	
+	.scroll-item-title {
+	    width:100%;
+	    height: 120rpx;
+	    line-height: 120rpx;
+	    text-align: center;
+	    color: #555;
+	}
+	
+	
+
+</style>
\ No newline at end of file

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

@@ -7,8 +7,8 @@
                 <text class="uni-subtitle-text">纵向滚动</text>
             </view>
             <view>
-                <scroll-view :scrollTop="scrollTop" :scrollY="true" class="scroll-Y" @scrolltoupper="upper"
-                    @scrolltolower="lower" @scroll="scroll">
+                <scroll-view :scrollTop="scrollTop" :scrollY="true" class="scroll-Y" scroll-with-animation="true"
+				@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
                     <view id="demo1" class="scroll-view-item uni-bg-red"><text class="text">A</text></view>
                     <view id="demo2" class="scroll-view-item uni-bg-green"><text class="text">B</text></view>
                     <view id="demo3" class="scroll-view-item uni-bg-blue"><text class="text">C</text></view>
@@ -18,6 +18,11 @@
                 <text class="uni-link">点击这里返回顶部</text>
             </view>
 
+			<view class="uni-title uni-common-mt">
+				<text class="uni-subtitle-text">下拉刷新</text>
+			</view>
+			<button type="primary" class="button default-button" @click="gotoRefresher" size="mini">跳转"下拉刷新示例"</button>
+			
             <view class="uni-title uni-common-mt">
                 <text class="uni-title-text">Horizontal Scroll</text>
                 <text class="uni-subtitle-text">横向滚动</text>
@@ -61,6 +66,11 @@
                     icon: "none",
                     title: "纵向滚动 scrollTop 值已被修改为 0"
                 })
+            },
+			gotoRefresher: function () {
+				uni.navigateTo({
+					url:"/pages/component/scroll-view/scroll-view-refresher"
+				})
 			}
         }
     }
@@ -93,4 +103,7 @@
         font-size: 36rpx;
         color: #ffffff;
     }
+	.button {
+	    margin-top: 30rpx;
+	}
 </style>
\ No newline at end of file