新增示例：随滚动折叠的导航栏 自定义上拉下拉效果

pages.json

@@ -598,6 +598,18 @@
         "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": {

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",

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>
+
+    <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

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

+<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

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>

pages/template/scroll-fold-nav/scroll-fold-nav.uvue

+<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