前言
熟悉微信小程序(文章后面统称小程序)开发的朋友们应该知道,原生提供的导航栏除了能修改背景颜色和标题之外,对布局的修改和拓展并不支持。原生的导航栏如下:
我们很多的小程序可能都是从app移植过去的,在原生app(Android/iOS)上我们能对导航栏做一些自定义的布局来实现我们的需求,很显然原生提供的导航栏不能做到这点,所以我们需要自定义导航栏。今天我们就通过自定义导航栏实现如下效果:
看完效果图,接下来我们就开始动手实现了。
(
注
:
由
于
小
程
序
限
制
,
我
们
没
法
去
掉
右
侧
的
胶
囊
按
钮
,
没
法
做
到
完
全
的
自
定
义
,
\color{red}{(注:由于小程序限制,我们没法去掉右侧的胶囊按钮,没法做到完全的自定义,}
(注:由于小程序限制,我们没法去掉右侧的胶囊按钮,没法做到完全的自定义,
胶
囊
按
钮
左
侧
的
一
大
块
区
域
我
们
都
可
以
自
定
义
成
我
们
想
要
的
布
局
)
\color{red}{胶囊按钮左侧的一大块区域我们都可以自定义成我们想要的布局)}
胶囊按钮左侧的一大块区域我们都可以自定义成我们想要的布局)
实现思路和步骤
- 去掉原来的导航栏
- 自定义导航栏布局
- 设置导航栏高度(跟原导航栏一样高)
- 绑定事件,实现逻辑
去掉原来的导航栏
这一步很简单,只需要在所在页面的json文件中做如下配置:
// json文件
"window":{
"navigationStyle": "custom"
}
自定义导航栏布局
我的页面布局必须是竖向排列,然后将我们自定义导航栏布局放到顶部,具体请看代码:
// wxml文件
<view class='page'>
<view class='nav' >
<view class='title-view'>
<view class='title'>南昌市</view>
<image class='title-img' src='../../images/arrow_icon.png'></image>
</view>
</view>
</view>
// wxss文件
//整个页面竖向布局
.page {
display: flex;
flex-direction: column;
padding-bottom: 120rpx;
}
//设置导航栏固定布局,放置跟随页面滚动
.nav {
width: 100%;
overflow: hidden;
position: fixed;
background: #1296DB;
top: 0;
left: 0;
z-index: 99;
display: flex;
justify-content: center;
}
//中间title外层布局
.title-view {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
//中间title布局
.title {
color: white;
font-size: 30rpx;
font-weight: bold;
}
//title旁边箭头
.title-img {
width: 25rpx;
height: 15rpx;
margin-left: 10rpx;
}
上面的代码都是带有注释的,相信大家都能看懂,接下来我们就看下效果:
很显然这个效果没有达到我们文章开头展示的那样,那是因为我们还有一些工作还没有完成,接下来我们继续。
设置导航栏高度
首先在app.js中的globalData中设置两个属性:
// app.js文件
globalData: {
...
navHeight: 0,//导航栏高度
statusBar: 0,//状态栏高度
...
}
自定义一个函数给globalData中的属性赋值:
// app.js文件
getSystemInfo: function () {
let t = this;
wx.getSystemInfo({
success: function (res) {
t.globalData.systemInfo = res;
//导航高度
t.globalData.navHeight = res.statusBarHeight + 46;//46px是官方规定的导航栏高度
t.globalData.statusBar = res.statusBarHeight;
}
});
}
然后在app.js的onLaunch中调用这个函数。最后在自定义导航栏的页面的js文件onLoad函数中通过setData赋值给页面:
// 自定义导航栏页面js文件 ,data中先要设置下面两个属性
const app = getApp();//js文件最上面定义
this.setData({
navH: app.globalData.navHeight,
statusBarHeight: app.globalData.statusBar
})
最后在页面中通过style动态赋值高度:
<view class='page'>
<!--nav view start-->
<view class='nav' style='height:{{navH}}px'>
//下面是给标题的顶部设置一个状态栏高度的间距,防止标题太靠顶部
<view class='title-view' style='margin-top:{{statusBarHeight}}px'>
<view class='title'>南昌市</view>
<image class='title-img' src='../../images/arrow_icon.png'></image>
</view>
</view>
</view>
到这里我们的布局工作就完成了,看下最终效果吧:
绑定事件,实现逻辑
通过上面几步,我们成功实现了我们自定义导航栏所要求达到的效果。然后你就可以尽情的bindtap,来实现我们自己的业务逻辑,相信这里大家都是会的啦。
尾巴
本文实现的自定义导航栏较为简单,你完全可以按照这个思路实现更加复杂的自定义导航栏。今天就到这里了,希望今天的文章能对读者有所帮助(助人为快乐之本么,哈哈)。下篇,通过本次自定义导航栏的bindtap,我将带大家实现带索引的城市选择列表:
微信小程序手把手教你实现带字母索引的城市选择列表
如果你喜欢我的文章,欢迎给我留言、点赞,谢谢!