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 20" :key="index" style="height: 100px;background-color: #FFF;">
          content-{{item}}
        </view>
      </view>
    </scroll-view>
    <scroll-fold-header ref="header" @back="back" @toSearchPage="toSearchPage()"/>
  </view>
</template>

<script>
  import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
  import scrollFoldHeader from './scroll-fold-header/scroll-fold-header.uvue';
  export default {
    components:{scrollFoldHeader},
    data() {
      return {}
    },
    methods: {
      onScroll(e : ScrollEvent) {
        (this.$refs['header'] as ComponentPublicInstance).$data['scrollTop'] = (e.detail.scrollTop<0?0:e.detail.scrollTop)
      },
      back() {
        // uni.navigateBack()  // 这么写用不了
        // 这么写可以用
        uni.navigateBack({
          success(result) {
            console.log('navigateBack success', result.errMsg)
          },
          fail(error) {
            console.log('navigateBack fail', error.errMsg)
          },
          complete(result) {
            console.log('navigateBack complete', result.errMsg)
          },
        })
      },
      toSearchPage() {
        uni.showToast({
          title: '暂不支持',
          icon: 'none'
        });
      }
    },
    onLoad() {}
  }
</script>

<style>
  .page {
    flex: 1;
    background-color: #fbdf0d;
  }

  .scroll-view {
    flex: 1;
  }
</style>