nui-app头部自定义导航栏

最新推荐文章于 2025-06-16 09:04:32 发布

原创最新推荐文章于 2025-06-16 09:04:32 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nui-app

uni-app 专栏收录该内容

3 篇文章

订阅专栏

本页面展示了天检无抗生态平台的头部UI设计，包括定制化的导航栏样式和布局。通过使用特定的CSS样式实现了独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="header">
           <view class="tit">天检无抗生态平台</view>
           <view>Natural Farm care Solution</view>
       </view>

</template>

<css>

/*导航栏*/
.header {
margin: 30upx 0;
}

.tit {
font-size: 34upx;
font-weight: bold;
}

.index {
   flex: 1;
   flex-direction: column;
   background-image: linear-gradient(200deg, #3d6d98 0%, #68ad96 100%);
   color: #fff;
   text-align: center;
   padding: 30upx 0;
   position: relative;
}

.status_bar {
height: var(--status-bar-height);
width: 100%;
}

.top_view {
   height: var(--status-bar-height);
   width: 100%;
   position: fixed;
   top: 0;
}

.content {
justify-content: center;
align-items: center;
}

.index_box {
   display: flex;
   flex-direction: row;
   align-items: center;
}

/*导航栏*/

</css>

pages.json里面的写法：

{
           "path": "pages/index/index",
           "style": {
               "navigationBarTitleText": "平台",
               "navigationStyle": "custom",
               "app-plus": {
                   "titleNView": false
               }
           }
       },