uniapp怎么实现类似原生条状页面效果

<template>  <view>    <custom-header class="header" ref="header"></custom-header>    <scroll-view :style="{ top: component_top + 'px' }" class="content" @scroll="contentScroll">      <!-- 内容区域 -->    </scroll-view>  </view></template><script>import customHeader from './components/custom-header.vue'; // 引入自定义头部组件export default {  components: {    customHeader  },  data() {    return {      component_top: 0,      scroll_top: 0,    }  },  methods: {    /**     * 改变自定义头部组件的透明度     */    changeHeaderOpacity() {      let opacity = this.scroll_top / 100;      if (opacity > 1) {        opacity = 1;      }      this.$refs.header.changeOpacity(opacity);    },    /**     * 监听页面滚动     * @param {Object} event     */    contentScroll(event) {      this.scroll_top = event.detail.scrollTop;      this.changeHeaderOpacity();    },  },};</script><style>.header {  position: fixed;  top: 0;  left: 0;  right: 0;  z-index: 99;}.content {  padding-top: 44px; /* 头部高度 */  /* 内容区域样式 */}</style>

<template>  <view class="custom-header">    <view :style="{ opacity: opacity }" class="header-main">      <!-- 头部内容 -->    </view>  </view></template><script>export default {  data() {    return {      opacity: 0,    }  },  methods: {    /**     * 改变透明度     */    changeOpacity(opacity) {      this.opacity = opacity;    },  },};</script><style>.custom-header {  height: 44px; /* 头部高度 */  background-color: #fff;  box-shadow: 0 1.5px 3px 0 #e3e3e3;  -webkit-transition: all .2s ease-out;  transition: all .2s ease-out;}.header-main {  height: 44px; /* 头部高度 */  -webkit-transition: opacity .2s ease-out;  transition: opacity .2s ease-out;}</style>