为什么需要自定义顶部导航栏
- 自定义左上角图标
- 自定义返回途径
- 节省页面空间,部分页面可以不需要顶部导航
- 总之就是各种灵活控制...
去掉原生的顶部导航
- 在app.json文件中设置
"navigationStyle": "custom"
复制代码
- 增加默认顶部导航自定义组件
"usingComponents": {
"navHead": "/compoent/navHead/index"
}
复制代码
不废话直接上代码
- js文件
var app=getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type:String,
value:''
},
showhome:{
type:Boolean,
value:false
}
},
/**
* 组件的初始数据
*/
data: {
title: "",//标题
showLeft: false,//是否显示返回按钮
ishomepage:false,//当前页是否首页
currentPagePath:''//当前页路径
},
ready: function () {
var pages = getCurrentPages(); //所有页面栈
var currentpagepath=pages[pages.length-1].route;
var ishomepage=currentpagepath=='pages/index/index';
this.setData({ showLeft: pages.length > 1, title: this.data.title,ishomepage:ishomepage,currentPagePath:currentpagepath })
},
/**
* 组件的方法列表
*/
methods: {
/**重新加载到首页,清空浏览痕迹 */
reLaunchHome: function (e) {
let formid = e.detail.formId;
wx.request({
url: app.globalData.host + '/api/miniprogram/AddFormId',
data: {
uid: app.globalData.userInfo.Uid,
formId: escape(formid)
}
})
wx.reLaunch({
url: "/pages/index/index",
})
},
/**回退 */
navigateBack: function (e) {
let formid = e.detail.formId;
wx.request({
url: app.globalData.host + '/api/miniprogram/AddFormId',
data: {
uid: app.globalData.userInfo.Uid,
formId: escape(formid)
}
})
wx.navigateBack({
delta: 1,
})
}
}
})
复制代码
- wxml文件
<view class='navigation'>
<view wx:if="{{showLeft}}" class='navleft'>
<form bindsubmit='navigateBack' report-submit='true'>
<button form-type='submit' class="tabButton" >
<image src='/images/navback.png'></image></button></form>
</view>
<view wx:if="{{!showLeft&&showhome}}" class='navleft'>
<form bindsubmit='reLaunchHome' report-submit='true'>
<button form-type='submit' class="tabButton" >
<image src='/images/navback.png'></image></button></form>
</view>
<view class='navtitle'>
<text>{{title}}</text>
</view>
</view>
复制代码
- wxss文件
.navigation {
height: 130rpx;
width: 750rpx;
overflow: hidden;
background-color:
position: fixed;
top: 0;
z-index: 999;
font-size: 32rpx;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.navleft{
width: 75px;
height: 70px;
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation image {
width: 40rpx;
height: 40rpx;
/* padding-left: 30rpx;
padding-top: 50rpx;
position: absolute; */
}
.navtitle{
width: 100%;
height: 70px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color:
}
.navtitle text{
padding-top: 40rpx;
}
.tabButton{
background-color:
position: inherit;
display: inline-flex;
padding: 0;
margin-left: 15px;
margin-top: 25px;
}
.tabButton::after{
border: none
}
复制代码