From 3c3c6f239a2794bbc67bf76d2e189bfc922b8859 Mon Sep 17 00:00:00 2001
From: linju <linju@dcloud.io>
Date: Sat, 15 Jul 2023 20:04:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=A4=BA=E4=BE=8B=EF=BC=9A?=
 =?UTF-8?q?=E9=9A=8F=E6=BB=9A=E5=8A=A8=E6=8A=98=E5=8F=A0=E7=9A=84=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=20=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=8A?=
 =?UTF-8?q?=E6=8B=89=E4=B8=8B=E6=8B=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  24 ++-
 pages/tabBar/template.uvue                    |  13 ++
 .../custom-pull-page/custom-pull-page.uvue    | 115 +++++++++++
 .../custom-pull/custom-pull.uvue              | 190 ++++++++++++++++++
 pages/template/drop-card/drop-card.uvue       |   6 +-
 .../scroll-fold-nav/scroll-fold-nav.uvue      | 118 +++++++++++
 static/template/scroll-fold-nav/back.png      | Bin 0 -> 2903 bytes
 static/template/scroll-fold-nav/search.png    | Bin 0 -> 3220 bytes
 8 files changed, 457 insertions(+), 9 deletions(-)
 create mode 100644 pages/template/custom-pull-page/custom-pull-page.uvue
 create mode 100644 pages/template/custom-pull-page/custom-pull/custom-pull.uvue
 create mode 100644 pages/template/scroll-fold-nav/scroll-fold-nav.uvue
 create mode 100644 static/template/scroll-fold-nav/back.png
 create mode 100644 static/template/scroll-fold-nav/search.png

diff --git a/pages.json b/pages.json
index 57f490a7..fffd7632 100644
--- a/pages.json
+++ b/pages.json
@@ -592,12 +592,24 @@
         "navigationBarTitleText": "详情示例"
       }
     },
-    {
-      "path": "pages/template/swiper-vertical-video/swiper-vertical-video",
-      "style": {
-        "navigationBarTitleText": ""
-      }
-    },
+    {
+      "path": "pages/template/swiper-vertical-video/swiper-vertical-video",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/template/custom-pull-page/custom-pull-page",
+      "style": {
+        "navigationBarTitleText": "自定义下拉上拉效果"
+      }
+    },
+    {
+      "path": "pages/template/scroll-fold-nav/scroll-fold-nav",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/API/get-battery-info/get-battery-info",
       "style": {
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index 32b9392c..13e6eb0b 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -56,6 +56,19 @@
             name: "划走式卡片",
             open: false,
             pages: [] as Page[]
+          },{
+            id: "scroll-fold-nav",
+            url: "scroll-fold-nav",
+            name: "随滚动折叠的导航栏",
+            open: false,
+            pages: [] as Page[]
+          },
+          {
+            id: "custom-pull-page",
+            url: "custom-pull-page",
+            name: "自定义上拉下拉效果",
+            open: false,
+            pages: [] as Page[]
           },
           {
             id: "swiper-vertical-video",
diff --git a/pages/template/custom-pull-page/custom-pull-page.uvue b/pages/template/custom-pull-page/custom-pull-page.uvue
new file mode 100644
index 00000000..e5caf274
--- /dev/null
+++ b/pages/template/custom-pull-page/custom-pull-page.uvue
@@ -0,0 +1,115 @@
+<template>
+  <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"
+      :loadingBoxHeight="30" :loadingThreshold="20" :loadingHoldHeight="30" @loading="loading" @refresh="refresh"
+      ref="custom-pull" class="custom-pull">
+
+      <template v-slot:refresh-box="scope">
+        <view class="refresh-box">
+          <image class="logo" src="/static/logo.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">拖动的距离：{{scope.get('pullingDistance')}}</text> -->
+        </view>
+      </template>
+
+
+      <view v-for="i in 8" class="item">
+        item-{{i}}
+      </view>
+
+      <template v-slot:loading-box="scope">
+        <view class="loading-box">
+          <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>拖动的距离：{{scope.get('pullingDistance')}}</text> -->
+        </view>
+      </template>
+
+    </custom-pull>
+
+  </view>
+</template>
+
+<script>
+  import customPull from './custom-pull/custom-pull.uvue';
+
+  export default {
+    components: {
+      customPull
+    },
+    data() {
+      return {
+      }
+    },
+    onLoad() {
+      console.log('this.$refs["custom-pull"]', this.$refs["custom-pull"]);
+    },
+    methods: {
+      loading() {
+        setTimeout(() => {
+          // this.$refs["custom-pull"].endLoading() //暂不支持，内部模拟实现
+        }, 1000);
+      },
+      refresh() {
+        setTimeout(() => {
+          // this.$refs["custom-pull"].endRefresh() //暂不支持，内部模拟实现
+        }, 1000);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .root {
+    flex: 1;
+    background-color: #FFF;
+  }
+  .top-box{
+    padding: 15px 5px;
+  }
+  .top-box-text{
+    font-size: 14px;
+    color: #888;
+  }
+
+  .custom-pull {
+    border: 1px solid #efefef;
+  }
+
+  .refresh-box,
+  .loading-box {
+    background-color: #efefef;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .logo {
+    width: 30px;
+    height: 30px;
+    margin-top: 3px;
+  }
+
+  .item {
+    height: 80px;
+    border-top: 1px solid #efefef;
+    justify-content: center;
+  }
+
+  .tip-text {
+    color: #888;
+    font-size: 12px;
+    padding: 2px 0;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/template/custom-pull-page/custom-pull/custom-pull.uvue b/pages/template/custom-pull-page/custom-pull/custom-pull.uvue
new file mode 100644
index 00000000..5aac964e
--- /dev/null
+++ b/pages/template/custom-pull-page/custom-pull/custom-pull.uvue
@@ -0,0 +1,190 @@
+<template>
+  <view class="pull-box-root" :style="{'height':height+'px'}">
+
+    <view class="pull-box" @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
+      :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 v-if="refreshState == 0">继续下拉执行刷新</view>
+        <view v-if="refreshState == 1">释放立即刷新</view>
+        <view v-if="refreshState == 2">刷新中...</view>
+        <view v-if="refreshState == 3">刷新完成</view>
+        <view style="position: absolute;top: 60px;">拖动的距离：{{y}}</view> -->
+
+      <scroll-view :scroll-y="true && !lockScrollY" :style="{'height':height+'px',width}" @scroll="onScroll">
+        <slot></slot>
+      </scroll-view>
+      <!-- <view v-if="loadingState == 0">继续上拉加载更多</view>
+          <view v-if="loadingState == 1">释放立即加载更多</view>
+          <view v-if="loadingState == 2">加载中...</view>
+          <view v-if="loadingState == 3">加载完成</view>
+          <view style="position: absolute;top: 60px;">拖动的距离：{{y}}</view>-->
+      <view class="loading-box" :style="{height:loadingBoxHeight+'px'}">
+        <slot name="loading-box" :loadingState="loadingState" :pullingDistance="y"></slot>
+      </view>
+    </view>
+
+    <!-- <view style="position: fixed;bottom: 100px;left: 100px;background-color: red;">
+      <text>scrollInBottom: {{scrollInBottom}}</text>
+      <text>height：{{height}}</text>
+      <text>loadingBoxHeight：{{loadingBoxHeight}}</text>
+      <text>{{height+refreshBoxHeight}}</text>
+    </view> -->
+
+  </view>
+</template>
+
+<script>
+  import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
+  let sY : number = 0;
+  let scrollTop : number = 0;
+  export default {
+    data() {
+      return {
+        x: 0 as number,
+        y: 0 as number,
+        lockScrollY: false as boolean,
+        scrollInBottom: false as boolean,
+        refreshState: 0 as number,
+        loadingState: 0 as number
+      }
+    },
+    computed: {
+    },
+    props: {
+      height: {
+        type: Number,
+        default: 300
+      },
+      width: {
+        type: String,
+        default: '750rpx'
+      },
+      refreshBoxHeight: {
+        type: Number,
+        default: 50
+      },
+      refreshThreshold: {
+        type: Number,
+        default: 30
+      },
+      loadingBoxHeight: {
+        type: Number,
+        default: 50
+      },
+      loadingThreshold: {
+        type: Number,
+        default: 20
+      },
+      refreshHoldHeight: {
+        type: Number,
+        default: 20
+      },
+      loadingHoldHeight: {
+        type: Number,
+        default: 20
+      },
+    },
+    methods: {
+      touchstart(e : TouchEvent) {
+        sY = e.touches[0].screenY
+      },
+      touchmove(e : TouchEvent) {
+        if (
+          // 滚动条不在顶部，也不是触底
+          scrollTop != 0 && !this.scrollInBottom ||
+          // 正在刷新中，或者加载更多中
+          this.refreshState != 0 && this.loadingState != 0
+        ) {
+          return
+        }
+
+        let touchmoveY : number = e.touches[0].screenY
+        // console.log('touchmoveY', touchmoveY);
+
+        this.lockScrollY = true
+        let mY = touchmoveY - sY
+        
+        if (
+          this.y < this.refreshBoxHeight && mY > 0
+        ) {
+          this.y = mY > this.refreshBoxHeight ? this.refreshBoxHeight : mY
+          console.log('下拉',this.y,this.refreshThreshold,this.refreshBoxHeight);
+          if (this.y >= this.refreshThreshold) {
+            this.refreshState = 1
+          }
+        } else if(scrollTop != 0 && this.y > this.loadingBoxHeight * -1){
+          this.y = mY <= this.loadingBoxHeight * -1 ? this.loadingBoxHeight * -1 : mY
+          console.log("上拉");
+          if (this.y < this.loadingThreshold * -1) {
+            this.loadingState = 1
+          }
+        }
+        else {
+          return
+        }
+
+      },
+      touchend() {
+        this.lockScrollY = false
+        if (this.refreshState == 1) {
+          this.y = this.refreshHoldHeight //下拉刷新时保持的高度
+          this.refreshState = 2
+          this.$emit('refresh')
+
+          // 因为不支持调用组件内的事件先在内部模拟
+          setTimeout(this.endRefresh, 1000);
+
+        } else if (this.loadingState == 1) {
+          this.y = -1 * this.loadingHoldHeight //上拉加载时时保持的高度
+          this.loadingState = 2
+          this.$emit('loading')
+
+          // 因为不支持调用组件内的事件先在内部模拟
+          setTimeout(this.endLoading, 1000);
+        } else {
+          this.y = 0
+        }
+      },
+      onScroll(e : ScrollEvent) {
+        console.log('ScrollViewScroll-currentTarget', e.currentTarget);
+        scrollTop = e.detail.scrollTop
+        this.scrollInBottom = (scrollTop + this.height) == e.detail.scrollHeight
+      },
+      endRefresh() {
+        this.refreshState = 3
+        setTimeout(() => {
+          this.refreshState = 0
+          this.y = 0
+        }, 1000);
+      },
+      endLoading() {
+        this.loadingState = 3
+        setTimeout(() => {
+          this.loadingState = 0
+          this.y = 0
+        }, 1000);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .pull-box-root {
+  }
+
+  .pull-box {}
+
+  /* .loading-box {
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .refresh-box {
+    justify-content: flex-end;
+    align-items: center;
+  } */
+</style>
\ No newline at end of file
diff --git a/pages/template/drop-card/drop-card.uvue b/pages/template/drop-card/drop-card.uvue
index e1518223..cb4b8c07 100644
--- a/pages/template/drop-card/drop-card.uvue
+++ b/pages/template/drop-card/drop-card.uvue
@@ -2,15 +2,15 @@
   <view class="root">
     <view class="card"
       :style="{'top':Math.abs(x)/-60 + 90 +'px',transform:'scale('+(movePercent/10+0.80)+')','height':cardHeight+'px'}">
-      <image class="user-img" :src="userList[0]"></image>
+      <image class="user-img" :src="userList[0]" :style="{'height':cardHeight+'px'}"></image>
     </view>
     <view class="card"
       :style="{'top':Math.abs(x)/-30 + 45 +'px',transform:'scale('+(movePercent/10+0.90)+')','height':cardHeight+'px'}">
-      <image class="user-img" :src="userList[1]"></image>
+      <image class="user-img" :src="userList[1]" :style="{'height':cardHeight+'px'}"></image>
     </view>
     <view @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
       :style="{'transform':'translate('+x+'px,'+y+'px) rotate('+x/-30+'deg)','height':cardHeight+'px'}" class="card">
-      <image class="user-img" :src="userList[2]"></image>
+      <image class="user-img" :src="userList[2]" :style="{'height':cardHeight+'px'}"></image>
       <view class="state">
         <image class="state-icon like" :style="{'opacity':x < 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/like.png" mode="widthFix"></image>
         <image class="state-icon dislike" :style="{'opacity':x > 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
diff --git a/pages/template/scroll-fold-nav/scroll-fold-nav.uvue b/pages/template/scroll-fold-nav/scroll-fold-nav.uvue
new file mode 100644
index 00000000..d19eb2ac
--- /dev/null
+++ b/pages/template/scroll-fold-nav/scroll-fold-nav.uvue
@@ -0,0 +1,118 @@
+<template>
+  <view class="page">
+    <scroll-view :scroll-y="true" @scroll="onScroll" class="scroll-view">
+      <view class="content">
+        <view style="height: 110px;">
+          <!-- 垫高专用 -->
+        </view>
+        <view v-for="(item,index) in 100" :key="index" style="height: 100px;background-color: #FFF;">
+          content-{{item}}
+        </view>
+      </view>
+    </scroll-view>
+
+    <view class="top-box" :style="{height:(110 - (scrollTop>40?40:scrollTop) )+'px','background-color': 'rgba(255, 255, 255, '+(scrollTop*3>100?100:scrollTop*3)/100+')'}">
+      <view class="scroll-fold-nav"
+        :style="{'opacity': 1 -(scrollTop*3>100?100:scrollTop*3)/100}"
+      >
+        <view style="margin-left: 30px;">DCloud 为开发者而生</view>
+      </view>
+      <view @click="back" class="back" style="position: absolute;top:35px;left: 8px;">
+        <image src="/static/template/scroll-fold-nav/back.png" style="width: 20px;" mode="widthFix"></image>
+      </view>
+      <view class="search" @click="toSearchPage" :style="{
+        'width':searchWidth - (scrollTop>40?40:scrollTop) +'rpx',
+        'top':0 - (scrollTop>40?40:scrollTop) +'px'
+      }">
+        <view style="flex-direction: row;">
+          <image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
+          <text class="search-tip-text">请输入你要搜索的内容</text>
+        </view>
+        <text class="search-btn">搜索</text>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+  import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
+  export default {
+    data() {
+      return {
+        scrollTop: 0,
+        searchWidth: 700
+      }
+    },
+    methods: {
+      onScroll(e : ScrollEvent) {
+        this.scrollTop = e.detail.scrollTop
+      },
+      back(){
+        // 暂不支持通过navigateBack api 返回
+        // uni.navigateBack()
+        
+        uni.switchTab({
+          url:'/pages/tabBar/template'
+        })
+        
+      },
+      toSearchPage(){
+        uni.showToast({
+          title: '暂不支持',
+          icon: 'none'
+        });
+      }
+    },
+    onLoad() {
+    }
+  }
+</script>
+
+<style>
+  .page {
+    flex: 1;
+    background-color: #fbdf0d;
+  }
+
+  .scroll-view {
+    flex: 1;
+  }
+
+  .top-box {
+    position: fixed;
+    top: 0;
+    padding-top: 25px;
+    align-items: flex-end;
+    border-bottom: 1px solid #efefef;
+  }
+
+  .scroll-fold-nav {
+    height: 44px;
+    width: 750rpx;
+    justify-content: center;
+  }
+
+  .search {
+    background-color: #FFFFFF;
+    border: 1px solid #fbdf0d;
+    height: 35px;
+    border-radius: 100px;
+    margin: 0 25rpx;
+    padding: 8px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .search-tip-text {
+    font-size: 12px;
+    color: #666;
+  }
+  .search-btn {
+    font-size: 12px;
+    background-color: #ff6900;
+    color: #FFF;
+    padding: 5px 8px;
+    border-radius: 100px;
+  }
+</style>
\ No newline at end of file
diff --git a/static/template/scroll-fold-nav/back.png b/static/template/scroll-fold-nav/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..b10373991bc1b31ca5e7cdf6aa06551efff34809
GIT binary patch
literal 2903
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
VbbXIQu#o-ht4&JPG$*Wm`M<}Y7B2t*

literal 0
HcmV?d00001

diff --git a/static/template/scroll-fold-nav/search.png b/static/template/scroll-fold-nav/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa2231c5f62f87cf5d98cafc707a692f92fb6b72
GIT binary patch
literal 3220
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

literal 0
HcmV?d00001

-- 
GitLab