uniapp如何自定义顶部滑动导航

在UniApp中自定义顶部滑动导航的步骤如下：

1. 首先，在`page.json`文件中定义自定义导航栏的样式。你可以设置`navigationStyle`为`custom`来启用自定义导航栏样式。例如：

{
  "path": "pages/charts/charts",
  "style": {
    "navigationBarTitleText": "",
    "enablePullDownRefresh": false,
    "navigationStyle": "custom"
  }
}

2. 接下来，在页面对应的`style`部分中定义导航栏样式和滑动内容区的样式。例如：

<style lang="scss">
  // 顶部导航栏
  .chartsTop {
    width: 750rpx;
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: blue;
  }
  // 导航栏里边文字
  .text {
    position: absolute;
    left: 20rpx;
    bottom: 10rpx;
    color: #ffffff;
  }
  // 内容区顶部背景
  .top {
    height: 300rpx;
    width: 100%;
    background-color: blue;
    position: fixed;
    z-index: -1;
    display: flex;
    justify-content: center;
    .top-img {
      width: 240px;
      height: 180px;
    }
  }
  // scroll-view 里边内容可滑动 包裹chartsContent 透明
  .test {
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
    height: 1400rpx;
    border: 0;
    box-sizing: border-box;
  }
  // 可滑动的view
  .chartsContent {
    width: 100%;
    height: 1400rpx;
    position: absolute;
    margin-top: 290rpx;
    border: 0;
    box-sizing: border-box;
    border-radius: 20rpx;
    background-color: #fff;
  }
</style>

3. 最后，在自定义页面的模板中，使用对应的类名来应用定义的样式。例如：

<view class="container">
  <!-- 导航栏 -->
  <view class="chartsTop" :style="{ height: contentTop }">
    <text class="text" :style="{ fontSize: contentFontSize }">排行</text>
  </view>
  <!-- 顶部背景 -->
  <view class="top" :style="{ top: contentTop }">
    <img class="top-img" src="/static/images/othericons/正在开发中.png" alt="" />
  </view>
  <scroll-view scroll-y="true" class="test" :style="{ top: contentTop }">
    <!-- 可滑动view -->
    <view class="chartsContent">
      <!-- 内容 -->
    </view>
  </scroll-view>
</view>

通过以上步骤，你可以在UniApp中自定义顶部滑动导航。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp小程序自定义导航栏，可滑动view](https://blog.csdn.net/qq_44184452/article/details/131044118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]