项目中,UI提供的的设计图是这样的,这里就需要自定义导航栏了。
自定义导航又两种情况,一种是全局配置,一种是单页面配置。
先说下两种配置方法:
1.全局配置navigationStyle要求:
- 调试基础库>=1.9.0
- 微信客户端>=6.6.0
需要在app.json中进行如下配置:使用自定义导航的组件,设置自定义导航
{
"usingComponents": {
"navigationBar": "/component/nav-top/nav-top"
}
"window": {
"navigationStyle": "custom"
}
}
2.单页面配置navigationStyle要求
- 调试基础库>=2.4.3
- 微信客户端版本>=7.0.0
需要使用自定义导航的页面.json
{
"navigationStyle": "custom",
"usingComponents": {
"navigationBar": "/component/nav-top/nav-top"
}
}
我这里只需要在首页使用该自定义导航。实现如下:
自定义导航组件.wxml
<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
<view style="{{'height: ' + statusBarHeight}}"></view>
<view class='title-container'>
<view class='title'>{{text}}</view>
<!-- 搜索 -->
<view class="search">
<image class="search_img" src="../../images/icon_so.png" ></image>
<input placeholder="请输入搜索内容" bindinput="watch" value="{{txt}}" bindconfirm='search'/>
</view>
</view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>
注意:
-
一般使用自定义导航栏时,下拉页面,导航栏也随着会下拉,这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight,所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度。
-
statusBarHeight:用来获取手机状态栏的高度,这个需要在全局app.js中通过wx.getSystemInfoSync()[‘statusBarHeight’]获取,
-
navigationBarHeight + 默认的高度:用来设定整个导航栏的高度
自定义导航组件.wxss
.navbar {
width: 100%;
background-color: #30CAB2;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.title-container {
height: 40px;
display: flex;
align-items: center;
position: relative;
}
.title {
color: white;
position: absolute;
top: 6px;
height: 30px;
line-height: 30px;
font-size: 36rpx;
left:30rpx;
}
.search {
position: absolute;
left:119rpx;
top:13rpx;
width:416rpx;
height:60rpx;
border-radius:31rpx;
overflow: hidden;
}
.search input {
height: 60rpx;
border-radius: 8rpx;
font-size: 30rpx;
vertical-align: middle;
padding-left: 63rpx;
background: #f2f2f2;
}
.search .search_img{
width: 34rpx;
height: 34rpx;
position: absolute;
top: 16rpx;
left:23rpx;
}
自定义导航组件.json
{
"component": true,
"usingComponents": {}
}
自定义导航组件.js
const app = getApp()
Component({
properties: {
text: {
type: String,
value: '首页'
},
back: {
type: Boolean,
value: false
},
home: {
type: Boolean,
value: false
}
},
data: {
inputVal: "", // 搜索框内容
txt:null,
statusBarHeight: app.globalData.statusBarHeight + 'px',
navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
},
methods: {
// 监听输入
watch: function (e) {
this.setData({
txt: e.detail.value,
});
},
//回车搜索
search() {
if (this.data.txt) {
wx.navigateTo({
url: "../filtrate_goods/filtrate_goods?type=" + this.data.txt
})
} else {
wx.showToast({
title: "请输入搜索内容",
duration: 1000,
icon: 'none',
});
}
},
},
})
在app.js中进行如下配置
globalData: {
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']
}
在需要使用自定义导航的页面的json文件中进行如下配置:使用组件
{
"navigationStyle": "custom",
"usingComponents": {
"navigationBar": "/component/nav-top/nav-top"
}
}
最后在需要使用自定义导航的页面中使用组件:
<navigationBar></navigationBar>