微信小程序--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}}" />