更新 自定义下拉上拉效果 模板

pages.json

@@ -657,8 +657,8 @@
     {
       "path": "pages/template/scroll-fold-nav/scroll-fold-nav",
       "style": {
-        "navigationStyle": "custom",
-        "navigationBarTextStyle":"black"
+        "navigationStyle": "custom",
+        "navigationBarTextStyle": "black"
       }
     },
     {
@@ -689,16 +689,22 @@
     {
       "path": "pages/template/scroll-fold-nav2/scroll-fold-nav2",
       "style": {
-        "navigationStyle": "custom"
+        "navigationStyle": "custom",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
+      "path": "pages/template/calendar/calendar",
+      "style": {
+        "navigationBarTitleText": "日历",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "pages/template/custom-refresher/custom-refresher",
+      "style": {
+        "navigationBarTitleText": "自定义下拉刷新（原生实现）",
+        "enablePullDownRefresh": false
       }
-    },
-    {
-        "path" : "pages/template/calendar/calendar",
-        "style" :                                                                                    
-        {
-            "navigationBarTitleText": "日历",
-            "enablePullDownRefresh": false
-        }
     }
   ],
   "globalStyle": {
@@ -715,8 +721,7 @@
     "selectedColor": "#007AFF",
     "borderStyle": "black",
     "backgroundColor": "#F8F8F8",
-    "list": [
-      {
+    "list": [{
         "pagePath": "pages/tabBar/component",
         "iconPath": "static/component.png",
         "selectedIconPath": "static/componentHL.png",
@@ -745,12 +750,10 @@
   "condition": {
     //模式配置，仅开发期间生效
     "current": 0, //当前激活的模式(list 的索引项)
-    "list": [
-      {
-        "name": "", //模式名称
-        "path": "", //启动页面，必选
-        "query": "" //启动参数，在页面的onLoad函数里面得到
-      }
-    ]
+    "list": [{
+      "name": "", //模式名称
+      "path": "", //启动页面，必选
+      "query": "" //启动参数，在页面的onLoad函数里面得到
+    }]
   }
-}
+}
\ No newline at end of file

pages/template/custom-pull-page/custom-pull-page.uvue

 <template>
-  <view class="root">
-    <view class="top-box">
-      <text class="top-box-text">可通过slot自定义，上拉加载下来刷新效果示例</text>
-      <text class="top-box-text">已知问题：因不支持通过ref 调用组件内的方法，本示例在下拉触发刷新方法时，1秒后“组件内”直接调用刷新完成接口，上拉加载同理。后续会修复</text>
-    </view>
+  <view class="root">
+    <view class="top-box">
+      <text class="top-box-text">可通过slot自定义，上拉加载下来刷新效果示例</text>
+    </view>
 
     <custom-pull :height="300" width="750rpx" :refreshBoxHeight="60" :refreshThreshold="60" :refreshHoldHeight="60"
       :loadingBoxHeight="30" :loadingThreshold="20" :loadingHoldHeight="30" @loading="loading" @refresh="refresh"
@@ -11,17 +10,16 @@
 
       <template v-slot:refresh-box="scope">
         <view class="refresh-box">
-          <image class="logo" src="/static/logo.png" mode="widthFix"></image>
+          <image class="logo" src="/static/uni.png" mode="widthFix"></image>
           <text class="tip-text" v-if="scope.get('refreshState')== 0">继续下拉执行刷新（slot）</text>
           <text class="tip-text" v-if="scope.get('refreshState')== 1">释放立即刷新</text>
           <text class="tip-text" v-if="scope.get('refreshState')== 2">刷新中</text>
-          <text class="tip-text" v-if="scope.get('refreshState')== 3">刷新完成</text>
+          <text class="tip-text" v-if="scope.get('refreshState')== 3">刷新完成</text>
           <!-- 可基于拖动距离实现互动性更加强的效果 -->
           <!-- <text class="tip-text">拖动的距离：{{scope.get('pullingDistance')}}</text> -->
         </view>
       </template>
 
-
       <view v-for="i in 8" class="item">
         item-{{i}}
       </view>
@@ -31,7 +29,7 @@
           <text class="tip-text" v-if="scope.get('loadingState')== 0">继续上拉加载更多（slot）</text>
           <text class="tip-text" v-if="scope.get('loadingState')== 1">释放立即加载更多</text>
           <text class="tip-text" v-if="scope.get('loadingState')== 2">加载中...</text>
-          <text class="tip-text" v-if="scope.get('loadingState')== 3">加载完成</text>
+          <text class="tip-text" v-if="scope.get('loadingState')== 3">加载完成</text>
           <!-- 可基于拖动距离实现互动性更加强的效果 -->
           <!-- <text>拖动的距离：{{scope.get('pullingDistance')}}</text> -->
         </view>
@@ -53,18 +51,18 @@
       return {
       }
     },
-    onLoad() {
-      console.log('this.$refs["custom-pull"]', this.$refs["custom-pull"]);
+    onReady() {
+      // console.log('this.$refs["custom-pull"]', this.$refs["custom-pull"] as ComponentPublicInstance);
     },
     methods: {
       loading() {
         setTimeout(() => {
-          // this.$refs["custom-pull"].endLoading() //暂不支持，内部模拟实现
+          (this.$refs["custom-pull"] as ComponentPublicInstance).$callMethod('endLoading')
         }, 1000);
       },
       refresh() {
         setTimeout(() => {
-          // this.$refs["custom-pull"].endRefresh() //暂不支持，内部模拟实现
+          (this.$refs["custom-pull"] as ComponentPublicInstance).$callMethod('endRefresh')
         }, 1000);
       }
     }
@@ -75,13 +73,13 @@
   .root {
     flex: 1;
     background-color: #FFF;
-  }
-  .top-box{
-    padding: 15px 5px;
-  }
-  .top-box-text{
-    font-size: 14px;
-    color: #888;
+  }
+  .top-box{
+    padding: 15px 5px;
+  }
+  .top-box-text{
+    font-size: 14px;
+    color: #888;
   }
 
   .custom-pull {
@@ -97,7 +95,7 @@
 
   .logo {
     width: 30px;
-    height: 30px;
+    height: 30px;
     margin-top: 3px;
   }
 

pages/template/custom-pull-page/custom-pull/custom-pull.uvue

@@ -5,9 +5,9 @@
       :style="{'height':height+loadingBoxHeight+refreshBoxHeight+'px',width,'transform':'translateY('+(y-refreshBoxHeight-3)+'px)'}">
 
 
-      <view class="refresh-box" :style="{height:refreshBoxHeight+'px'}">
-        <slot name="refresh-box" :refreshState="refreshState" :pullingDistance="y"></slot>
-      </view>
+      <view class="refresh-box" :style="{height:refreshBoxHeight+'px'}">
+        <slot name="refresh-box" :refreshState="refreshState" :pullingDistance="y"></slot>
+      </view>
       <!--          <view v-if="refreshState == 0">继续下拉执行刷新</view>
         <view v-if="refreshState == 1">释放立即刷新</view>
         <view v-if="refreshState == 2">刷新中...</view>
@@ -92,13 +92,15 @@
       touchstart(e : TouchEvent) {
         sY = e.touches[0].screenY
       },
-      touchmove(e : TouchEvent) {
+      touchmove(e : TouchEvent) {
         if (
-          // 滚动条不在顶部，也不是触底
-          scrollTop != 0 && !this.scrollInBottom ||
-          // 正在刷新中，或者加载更多中
-          this.refreshState != 0 && this.loadingState != 0
-        ) {
+          !( 
+            (scrollTop == 0 && this.refreshState == 0) || 
+            (this.scrollInBottom == true && this.loadingState == 0)
+          )
+        ) {
+          // console.log('this.scrollInBottom == true && this.loadingState == 0')
+          // console.log(this.scrollInBottom,this.loadingState)
           return
         }
 
@@ -150,9 +152,12 @@
         }
       },
       onScroll(e : ScrollEvent) {
-        console.log('ScrollViewScroll-currentTarget', e.currentTarget);
-        scrollTop = e.detail.scrollTop
-        this.scrollInBottom = (scrollTop + this.height) == e.detail.scrollHeight
+        // console.log('ScrollEvent-currentTarget', e.currentTarget);
+        // console.log('e.detail.scrollTop',Math.floor(e.detail.scrollTop));
+        scrollTop = Math.floor(e.detail.scrollTop)
+        // console.log('(scrollTop + this.height) == e.detail.scrollHeight',(scrollTop + this.height) == e.detail.scrollHeight)
+        // console.log('(scrollTop + this.height) == e.detail.scrollHeight',scrollTop,this.height,e.detail.scrollHeight)
+        this.scrollInBottom = (scrollTop + this.height) == Math.floor(e.detail.scrollHeight)
       },
       endRefresh() {
         this.refreshState = 3
@@ -173,9 +178,7 @@
 </script>
 
 <style scoped>
-  .pull-box-root {
-  }
-
+  .pull-box-root {}
   .pull-box {}
 
   /* .loading-box {