ステップ：
ステップ 1: ここで、pages.json フォルダーに設定します:
"navigationStyle": "custom" (デフォルトのネイティブ ナビゲーション バーをキャンセルします) 他の設定が必要な場合はuniapp
コード：
(ここでのスタイリングは全体設定)
(またはに基づくことができますビジネスニーズ単一ページのカスタム ナビゲーション バーをセットアップする)
ステップ 2: コンポーネントの再利用性を向上させるために、トップ ステータス バーのカスタム設定をコンポーネントにカプセル化する
コード ブロック:
<template>
<view class="_navbar" :style="{ height:`${trStyle.height + trStyle.top + bottomEx}px`}">
<view class="_navbar_container" :style="{ height:`${trStyle.height}px`,top:`${trStyle.top}px` }">
<view class="_navbar_back" @click="uni.navigateBack()">
<i class="iconfont icon-arrow-left-bold" style="font-size:40rpx"></i>
<view class="zuo"><image src="../../static/zuojiantou.png" mode="" class="img"></image></view>
</view>
<view :style="{ height:`${trStyle.height }px`,lineHeight:`${trStyle.height }px` }" class="_navbar_title">{
{ title }}</view>
</view>
</view>
</template>
<script>
export default{
name:"Navbar",
data(){
return {
trStyle:uni.getMenuButtonBoundingClientRect(),
background :'transparent',
bottomEx:10,
}
},
mounted(){
uni.$on('pageScroll',top => {
let parentRoute = this.$parent.$scope.route
let pages = getCurrentPages()
let page = pages[pages.length - 1]
let currentRoute = page.route
if(parentRoute === currentRoute){
this.$nextTick(()=>{
if(top === 0) this.background = 'transparent'
else if(top > this.trStyle.height + this.trStyle.top + this.bottomEx) this.background = '#2D248B'
else this.background = `rgba(#2D248B, ${
top/this.trStyle.height + this.trStyle.top + this.bottomEx })`
})
}
})
},
beforeUnmount(){
uni.$off('pageScroll')
},
props:{
back:{
type:Boolean,
default:true,
},
title:{
type:String,
default:'某某职业技术学院'
}
},
}
</script>
<style lang="scss">
@import '~@/styles/variable.scss';
@import '~@/styles/mixins.scss';
._navbar{
width:750rpx;
position:fixed;
z-index:10000;
transition:all 0.2s linear;
background: linear-gradient(90deg, #AF251A 0%, #FA582B 51%, #AF251A 100%);
._navbar_container{
width:750rpx;
position:absolute;
left:0;
bottom:0;
._navbar_back{
width: 100rpx;
.img{
width: 38rpx;
height: 38rpx;
}
@include flex();
color:#000;
height:100%;
font-size:40rpx;
//margin-left:20rpx;
cursor:pointer;
}
._navbar_title{
position:absolute;
left:50%;
top:0rpx;
height:100%;
transform:translateX(-50%);
font-size:30rpx;
font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
font-weight: normal;
color:#FFF;
}
}
}
</style>
ステップ 3: コンポーネントをページに導入する:
ステップ 4: ページ データに設定する:
上記の手順に従って、エラー レポートの問題は発生しません (実際のプロジェクト開発で使用します)
このコンポーネントは、さまざまなモデルに適しています。 (iOSモデル含む)