微信小程序——自定义导航栏

微信头部导航栏可能通过json配置：

但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示：

现在具体说一下实现步骤及方法：

步骤：

1.在 app.json 里面把 "navigationStyle" 设置为 "custom"

这样子之后就只会保留右上角胶囊按钮了。

2.在app.js中通过wx.getSystemInfo()获取头部导航条的高度，因为在不同的手机型号头部那条栏目高度可能不一致。

App({onLaunch: function () {wx.getSystemInfo({success: res => {//导航高度this.globalData.navHeight = res.statusBarHeight + 46;}, fail(err) {console.log(err);}})}
})

3.因为这个头部导航是公共的，所以我们最好把它设置成一个组件，命名为navbar

index.wxml

<!--components/navbar/index.wxml-->
<view class="navbar" style='height:{{navH}}px'><view class="navbar-action-wrap  {{showHome ? 'navbar-action-group' : ''}} row item-center" wx:if="{{showNav}}"><block wx:if="{{showHome}}"><ss-icon name="back" color="#333" size="15px" custom-class="navbar-action_item first" bind:click="navBack"></ss-icon><ss-icon name="index"  color="#333" size="16px" custom-class="navbar-action_item" bind:click="toIndex" ></ss-icon></block><block wx:else>
<ss-icon name="back"  color="#fff" size="18px" custom-class="navbar-action_item first" bind:click="navBack"></ss-icon></block></view><view class='navbar-title'>{{pageName}}</view>
</view>

index.js

/ components/navbar/index.js
const App = getApp();Component({options: {addGlobalClass: true,},/*** 组件的属性列表*/properties: {pageName:String,showNav:{type:Boolean,value:true},showHome: {type: Boolean,value: true}},/*** 组件的初始数据*/data: {},lifetimes: {attached: function () {this.setData({navH: App.globalData.navHeight})}},/*** 组件的方法列表*/methods: {//回退navBack: function () {wx.navigateBack({delta: 1})      },//回主页toIndex: function () {wx.navigateTo({url: '/pages/admin/home/index/index'})},}
})

index.wxss:

/* components/navbar/index.wxss */
.navbar {width: 100%;overflow: hidden;position: relative;top: 0;left: 0;z-index: 10;
}.navbar-title {width: 100%;height: 46px;line-height: 46px;text-align: center;position: absolute;bottom: 0;left: 0;z-index: 10;background-color: #fff;color: #333;font-size: 30rpx;
}.navbar-action-wrap{position: absolute;left: 10px;bottom: 7px;z-index: 100;line-height: 1;padding-top: 4px;padding-bottom: 4px;
}
.navbar-action-group {  border:1px solid #e8e8e8;border-radius: 20px;overflow: hidden
}
.navbar-action_item{padding:3px 0;color: #333;
}
.navbar-action-group .navbar-action_item{border-right: 1px solid #e8e8e8;padding:3px 12px;
}

index.json:

{"component": true,"usingComponents": {"ss-icon": "/components/icon/index"}
}

ss-icon 是我自定义的一个 icon 组件，如果你没有这个组件，可以在我使用<ss-icon></ss-icon>的地方换成<view></view>组件，然后里面放入你的图标就可以了。

对于组件不太明白的，可以看下微信小程序组件相关组件的介绍。

组件已创建完毕，现在说下该组件的使用方法：

假设我们需要在index.wxml中需要调用这个组件，

1.在index.json中引用该组件：

{"usingComponents": {"navbar": "/components/navbar/index"}
}

2.在index.wxml中使用该组件：

<view class='view-page'><navbar page-name="你当前页面的名字"></navbar><view class='page-content' style='height:calc(100vh - {{navH}}px)'><!--这里放你的内容--></view>
</view>

3.通过index.wxss布局:

page {height: 100%;position: relative;overflow: hidden;box-sizing: border-box;
}.view-page {height: 100%;width: 100%;left: 0;top: 0;box-sizing: border-box;position: absolute;overflow: hidden;
}.page-content {box-sizing: border-box;position: relative;overflow-y: auto;
}

4.在index.js中获取全局的navH的值:

//获取应用实例
const App = getApp();Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let _this = this;_this.setData({navH: App.globalData.navHeight})},})

最后的结如下图所示：

微信小程序自定义导航栏相关推荐

微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
微信小程序自定义导航栏如何实现（简洁版）~内附代码
先来张效果图实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
微信小程序-自定义导航栏及返回上一级页面的实现
一.参考文章 1.微信小程序自定义navigationBar 2.微信小程序返回上一级页面的实现代码 3.小程序开发--常用布局二.需求在导航栏中需要显示信息的"未读数量",所 ...

微信小程序自定义导航栏

微信小程序——自定义导航栏

步骤：

微信小程序自定义导航栏相关推荐

最新文章

热门文章

微信小程序 自定义导航栏

微信小程序——自定义导航栏

步骤：

微信小程序 自定义导航栏相关推荐

最新文章

热门文章

微信小程序自定义导航栏

微信小程序自定义导航栏相关推荐