微信小程序自定义头部导航navbar

最新推荐文章于 2025-01-11 12:06:01 发布

原创

最新推荐文章于 2025-01-11 12:06:01 发布 · 430 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了如何创建一个高度可定制的头部导航栏组件，适用于不同设备和需求，包含WXML、WXSS代码实现以及关键样式调整。组件支持标题居中、胶囊按钮和适配性设计，可用于小程序开发中.

根据需求，需要做一个自定义的头部导航，以便自适应其他需求和机型，在此封装了一个navbar

wxml文件

<view class='nav-wrap' style='height: {
      
      {
      
      height*2 + 20}}px; background-color: {
      
      {
      
      navbarData.backgroundColor}};'>
  <view class='nav-title' style='line-height: {
      
      {
      
      height*2 + 44}}px; color: {
      
      {
      
      navbarData.color}}'>{
  
  {navbarData.title}}</view>
  <view style='display: flex; justify-content: space-around;flex-direction: column'>
    <view class