新增 scroll-view下拉刷新示例

pages/tabBar/template.uvue

@@ -52,10 +52,16 @@
 						open: false,
 						enable: false,
 						pages: [] as Page[]
+					},{
+						id: "scroll-fold-nav",
+						url: "scroll-fold-nav",
+						name: "随滚动折叠的导航栏",
+						open: false,
+						pages: [] as Page[]
 					},{
 						id: "scroll-fold-nav2",
 						url: "scroll-fold-nav2",
-						name: "随滚动折叠的导航栏",
+						name: "随滚动折叠的导航栏2",
 						open: false,
 						pages: [] as Page[]
 					}, {
@@ -67,12 +73,18 @@
 						pages: [] as Page[]
 
 					}, {
-						id: "custom-pull-page",
+						id: "custom-refresher",
 						url: "custom-pull-page",
-						name: "自定义上拉下拉效果",
+						name: "自定义上拉下拉效果(前端实现)",
 						open: false,
 						pages: [] as Page[]
-					},
+					},{
+						id: "custom-refresher",
+						url: "custom-refresher",
+						name: "自定义下拉刷新（原生实现）",
+						open: false,
+						pages: [] as Page[]
+					},
 					{
 						id: "pull-zoom-image",
 						url: "pull-zoom-image",

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

+<template>
+  <view>
+    <scroll-view class="scroll-view" 
+        :refresher-enabled="true" :refresher-triggered="refresherTriggered" refresher-default-style="none"
+        @refresherpulling="onRefresherpulling"
+        @refresherrefresh="onRefresherrefresh"
+        :refresher-threshold="refresherThreshold"
+    >
+      <view v-for="i in 7" class="item">
+        item-{{i}}
+      </view>
+      <refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import RefresherEvent from 'io.dcloud.uniapp.runtime.RefresherEvent';
+  import refreshBox from './refresh-box/refresh-box.uvue';
+  export default {
+    components:{refreshBox},
+    data() {
+      return {
+        refresherTriggered:false,
+        refresherThreshold:40,
+        pullingDistance:0
+      }
+    },
+    computed:{
+      state():number{
+        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
+        },1000)
+      },
+      // onRefresherrestore(e:RefresherEvent){
+      //   console.log('onRefresherrestore',e)
+      // },
+      // onRefresherabort(e:RefresherEvent){
+      //   console.log('onRefresherabort',e)
+      // },
+    }
+  }
+</script>
+
+<style>
+  .scroll-view {
+    flex: 1;
+  }
+  .item {
+    height: 80px;
+    justify-content: center;
+  }
+</style>
\ No newline at end of file

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

+<template>
+  <view>
+    <view slot="refresher" class="refresh-box">
+      <image class="logo" src="/static/uni.png" mode="widthFix"></image>
+      <text class="tip-text">{{text[state]}}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        text: ['继续下拉执行刷新', '释放立即刷新', '刷新中...']
+      }
+    },
+    props: {
+      state: {
+        type: Number,
+        default: 0
+      },
+      methods: {
+
+      }
+    }
+  }
+</script>
+
+<style>
+  .refresh-box {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .logo {
+    width: 30px;
+    height: 30px;
+    margin-top: 3px;
+  }
+
+  .tip-text {
+    color: #888;
+    font-size: 12px;
+    padding: 2px 0;
+  }
+</style>
\ No newline at end of file