微信小程序--5. 如下图将顶部导航栏的地方改成自定义样式

5. 如下图将顶部导航栏的地方改成自定义样式

1）配置app.json

{
  "window": {
    "navigationStyle": "custom"  //增加这行
  }
}

 2)、封装顶部导航栏的样式

创建组件文件夹及文件miniprogram\components\navigation-bar\index

//components/navigation-bar/index.wxml
<!-- 自定义顶部栏 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
    <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; top:{{menuTop}}px;" />
</view>

<!-- 占位，高度与顶部栏一样 -->
<view style="height:{{navBarHeight}}px;" />

// components/navigation-bar/index.ts
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
 // defaultData（父页面传递的数据-就是引用组件的页面）
 defaultData: {
  type: Object,
  value: {
      title: "我是默认标题"
  },
  observer: function(newVal, oldVal) {}
}
  },

  /**
   * 组件的初始数据
   */
  data: {
    navBarHeight: app.globalData.navBarHeight,
    menuRight: app.globalData.menuRight,
    menuTop: app.globalData.menuTop,
    menuHeight: app.globalData.menuHeight,
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

// components/navigation-bar/index.scss
.nav-bar{ position: fixed; left:0;right
  :0;top: 0; color: #fff; background: #000;}
.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}

// components/navigation-bar/index.json
{
  "component": true,
  "usingComponents": {}
}

3)、页面引用

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/index"
  }
}

<navigation-bar default-data="{{defaultData}}" />