效果图：
目的：
1）为了实现 图1 中左上角 可以是 search搜索图标 在点击后进入 搜索页
2）为了实现 图2 中 顶部背景图 效果
所以只能通过自定义导航实现
注：
① 我用的是wepy 小程序框架 1.7的版本
② 使用cover-view & cover-image 是为了 解决 引入的图表 canvas元素在view元素的上层 滚动到导航栏的时候 会 遮挡导航栏的问题
一、先将 navigationStyle设置为custom
二、app.wepy 获取状态栏的高度
onLaunch() {
wx.getSystemInfo({
success: res => {
this.globalData.statusBarHeight = res.statusBarHeight;
}
});
}
导航栏组件
wxml
使用cover-view & cover-imgage 是为了解决图表canvas 在view 上层。导致遮挡 导航栏问题 （使用了cover-view只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button）
如果不需要用的话 可以自行换 view & image
<cover-view class="nav-wrap" style="height: {{height*2 + 20}}px;overflow:hidden; background:{{bgColor}};">
<!-- // 导航栏 中间的标题 -->
<cover-view class="nav-title" style="line-height: {{height*2 + 44}}px; color:{{color}}">{{title}}</cover-view>
<cover-view style="display: flex; justify-content: space-around;flex-direction: column">
<!-- // 其中v-if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，1:显示搜索按钮 2:显示返回按钮 -->
<cover-view class="nav-capsule" style="line-height: {{height*2 + 44}}px;" wx:if="{{showCapsule}}">
<cover-view bindtap="_navback" wx:if="{{showCapsule === 2 }}">
<cover-image src="/images/icon_Back_w@2x.png" style="width:24px;height:24px;margin-top:{{height+6}}px" class="back-search" hidden="{{color !='#fff'}}"></cover-image>
<cover-image src="/images/icon_Back@2x.png" style="width:24px;height:24px;margin-top:{{height+6}}px" class="back-search" hidden="{{color !='#000'}}"></cover-image>
</cover-view>
<cover-view bindtap="_backsearch" wx:if="{{showCapsule === 1 }}">
<cover-image src="/images/icon_search_top@2x.png" style="width:24px;height:24px;margin-top:{{height+6}}px" class="back-pre"></cover-image>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
style
/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */<style>.nav-wrap { position: fixed; width: 100%; top: 0; background: #fff; color: #000; z-index: 9999999;}/* 标题要居中 */.nav-title { position: absolute; text-align: center; max-width: 400rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 36rpx; color: #2c2b2b; font-weight: 600;}.nav-capsule { display: flex; align-items: center; margin-left: 30rpx; width: 140rpx; justify-content: space-between; height: 100%;}.navbar-v-line { width: 1px; height: 32rpx; background-color: #e5e5e5;}.back-pre,.back-search { width: 32rpx; height: 36rpx; margin-top: 4rpx; padding: 10rpx;}.nav-capsule .back-search { width: 36rpx; height: 40rpx; margin-top: 3rpx;}</style>
script
<script>
import wepy from 'wepy';export default class Navbar extends wepy.component {
data = {};
props = {
title: String, //导航栏文字
bgColor: String, //导航栏背景颜色
color: { type: String, default: '#000' }, //字体颜色
showCapsule: { type: Number } //1:search; 2:back; 3:share进来的 || null =》不显示
};
events = {};
computed = {
height() {
var height = this.$parent.$parent.globalData.statusBarHeight; //获取全局的状态栏高度 statusBarHeight
return height;
}
};
methods = {
_navback() {
wx.navigateBack({ delta: 1 });
},
_backsearch() {
wx.navigateTo({
url: '/pages/search/search'
});
}
};
onLoad() {
}
}
</script>
实现图2中的效果
①将导航栏设置成透明背景
② 将图片放在父组件
