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

pages.json

@@ -658,7 +658,7 @@
       "path": "pages/template/scroll-fold-nav/scroll-fold-nav",
       "style": {
         "navigationStyle": "custom",
-        "navigationBarTextStyle":"black"
+        "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" :                                                                                    
-        {
+      "path": "pages/template/calendar/calendar",
+      "style": {
         "navigationBarTitleText": "日历",
         "enablePullDownRefresh": false
       }
+    }, {
+      "path": "pages/template/custom-refresher/custom-refresher",
+      "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": [
-      {
+    "list": [{
       "name": "", //模式名称
       "path": "", //启动页面，必选
       "query": "" //启动参数，在页面的onLoad函数里面得到
-      }
-    ]
+    }]
   }
 }
\ No newline at end of file

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

@@ -2,7 +2,6 @@
   <view class="root">
     <view class="top-box">
       <text class="top-box-text">可通过slot自定义，上拉加载下来刷新效果示例</text>
-      <text class="top-box-text">已知问题：因不支持通过ref 调用组件内的方法，本示例在下拉触发刷新方法时，1秒后“组件内”直接调用刷新完成接口，上拉加载同理。后续会修复</text>
     </view>
 
     <custom-pull :height="300" width="750rpx" :refreshBoxHeight="60" :refreshThreshold="60" :refreshHoldHeight="60"
@@ -11,7 +10,7 @@
 
       <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>
@@ -21,7 +20,6 @@
         </view>
       </template>
 
-
       <view v-for="i in 8" class="item">
         item-{{i}}
       </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);
       }
     }

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

@@ -94,11 +94,13 @@
       },
       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 {