效果圖：?
目的：
????????????1）為了實現(xiàn) 圖1 中左上角 可以是 search搜索圖標 在點擊后進入 搜索頁?
? ? ? ? ? ? 2）為了實現(xiàn) 圖2 中 頂部背景圖 效果
所以只能通過自定義導航實現(xiàn)
注：
? ?????① 我用的是wepy 小程序框架 1.7的版本?
? ? ? ?②? 使用cover-view & cover-image 是為了 解決? 引入的圖表 canvas元素在view元素的上層? 滾動到導航欄的時候 會 遮擋導航欄的問題
一、先將 navigationStyle設置為custom? ?
二、app.wepy? ?獲取狀態(tài)欄的高度??
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;? ?//獲取全局的狀態(tài)欄高度?statusBarHeight??
?????????????????????????????return height;
?????????????????????}
? ? ? ? ? ? ?};
?????????????methods = {
? ? ? ? ? ? ? ? ? ? _navback() {
?????????????????????????wx.navigateBack({ delta: 1 });
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ?_backsearch() {
?????????????????????????wx.navigateTo({
?????????????????????????????????url: '/pages/search/search'
?????????????????????????});
?????????????????}
? ? ? ? ? ? };
?????????onLoad() {
????????????}?
}
</script>
實現(xiàn)圖2中的效果?
①將導航欄設置成透明背景?
② 將圖片放在父組件?
