1.在navbar文件夹下新建下面四个文件
- wxml
<view class="navbar custom-class" style='height:{{navHeight}}px;background:{{bgColor}}'>
<view wx:if="{{showNav}}" bindtap="goScan" class="navbar-action-wrap row item-center" style='top:{{navTop}}px;width:160rpx'>
<image class="scan-logo" src="../assets/imgs/scan@2x.png"></image>
</view>
<view class='navbar-title' style='top:{{navTop}}px;'>
{{pageName}}
</view>
</view>
- js
// navbar/index.js
import Api from '../api/api.js'
import util from '../utils/util.js'
import consts from '../utils/consts.js'
const App = getApp();
Component({
options: {
addGlobalClass: true,
},
externalClasses: ['custom-class'],
/**
* 组件的属性列表
*/
properties: {
pageName:String,
showNav: {
type: Boolean,
value: true
},
bgColor:{
type: String,
value: '#fff'
},
iconColor:{
type: String,
value: '#000'
},
titleColor:{
type: String,
value: '#000'
},
},
/**
* 组件的初始数据
*/
data: {
},
lifetimes: {
attached: function () {
this.setData({
navHeight: App.globalData.navHeight,
navTop: App.globalData.navTop
})
}
},
/**
* 组件的方法列表
*/
methods: {
//回退
_navBack: function () {
wx.navigateBack({
delta: 1
})
},
//扫一扫--图标或者按钮点击事件
goScan() {
var that = this;
wx.scanCode({
success: (res) => {
var result;
if (res.result.includes('http')) {
let url = res.result;
result = {
transportLineId: util.getQueryVariable('transportBulkLineId',url) || '',
fid: util.getQueryVariable('fromType', url) || ''
}
} else {
try {
result = JSON.parse(res.result);
} catch (error) {
wx.showToast({
title: '请扫正确的二维码',
icon: "none",
duration: 2000
})
return;
}
}
if (result.transportLineId&&result.fid) {
// 内部参数--给下个页面（货源）使用
let _scanparam = {
fid:result.fid,
transportLineId:result.transportLineId,
fromType: '3'
}
var param = {
transportLineId: result.transportLineId,
fromType: result.fid,
requestType: '3'
};
console.log('scanSkipUrl_param',param);
Api.scanSkipUrl({
data: param
}).then(res1 => {
// 判断 如果是老项目 加token 否则加tokenNew
if (res1.reCode === consts.SERVER_CODE.SUCCESS_CODE_0) {
var skipeUrl = res1.result.skipUrl;
// todo:4.0去掉哦
let skip_param = {
transportLineId: result.transportLineId,
fromType: 3
}
// 判断是不是开通大宗审计 如果是到小程序专属货源
if (skipeUrl == 'weapp') {
that.setData({
selected: 2,
})
// 传个非tab1 也不是空代表扫一扫进来的执行我自己要执行的方法page.testFun
App.globalData.fromType = '3';
wx.switchTab({
url: '/pages/goods/goods',
success: function (e) {
setTimeout(function(){
var page = getCurrentPages().pop();
if (!(page == undefined || page == null)) {
console.log('page.testFun',page.testFun)
if(typeof page.testFun === 'function'){
page.testFun(_scanparam);
}
}
},100)
}
})
} else if (skipeUrl == '../transTask/transTask') {
wx.navigateTo({
url: '/pages/transTask/transTask?skip_param=' + JSON.stringify(skip_param),
})
} else {
var url;
url = util.editUrl(skipeUrl);
//接收数据，保证每次都拼接上skipeUrl
wx.navigateTo({
url: `/pages/update/update?url=${encodeURIComponent(url)}`
})
}
} else {
wx.showToast({
title: res1.reInfo,
icon: 'none',
duration: 2000
})
}
}).catch(error => {
console.log(error);
})
} else {
wx.showToast({
title: '请扫正确的二维码',
icon: 'none',
duration: 2000
})
}
}
})
}
}
})
- json
{
"component": true
}
- wxss
/* components/navbar/index.wxss */
.navbar {
width: 100%;
overflow: hidden;
position: relative;
top: 0;
left: 0;
z-index: 10;
flex-shrink: 0;
}
.scan-logo {
width: 42rpx;
height: 42rpx;
padding-left: 24rpx;
}
.navbar-title {
width: 100%;
box-sizing: border-box;
padding-left: 115px;
padding-right: 115px;
height: 32px;
line-height: 32px;
text-align: center;
position: absolute;
left: 0;
z-index: 10;
color: black;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.navbar-action-wrap {
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: absolute;
left: 10px;
z-index: 11;
line-height: 1;
/* padding-top: 4px;
padding-bottom: 4px; */
}
.navbar-action-group {
border: 1px solid #f0f0f0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.2);
}
.navbar-action_item {
color: #333;
}
.navbar-action-group .navbar-action_item {
border-right: 1px solid #f0f0f0;
}
.navbar-action-group .last {
border-right: none;
}
2.使用引入
- 在需要使用自定义头部的页面中的json文件中引入
{
"navigationStyle": "custom",
"usingComponents": {
"nav-bar": "/navbar/index"
}
}
- wxml中引入
<nav-bar page-name="{{pageName}}" icon-color='#fff' title-color="#fff" show-nav="{{showNav}}" bg-color="#fff">
</nav-bar>
- js中配置参数
js的data里加这三个参数
navHeight: 0,//用作高度适配 在页面中的onload中赋值为gloabledata的navHeight 页面计算高度适应
pageName: '我的运单',//头部导航名称
showNav: true,//是否展示头部操作按钮
onload赋值代码如下
this.setData({
navHeight: app.globalData.navHeight
})
这里注意 具体页面样式 高度适配自己调整
