名錶維修保養：uniapp 微信小程式自定義導航欄 詳細步驟

风的方向·發表於2024-04-27
APP微信小程式

元件使用：

<navbar class="header" :background="backgroundColor" back title="標題" @onBack="goBack"></navbar>

元件引用：

import navbar from '@/components/NavBer.vue';

元件註冊：

components:{navbar}

元件封裝：

<template>
<view class="prohibition">
<view class="demo" :style="[{background},{color},{height},{paddingTop}]">
<!-- 左側返回按鈕 -->
<view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]">
<uni-icons type="arrowleft" size="30" :color='color'> 11 </uni-icons>
<!-- 此處圖示使用的是 uni-ui圖示 -->
</view>
<!-- 中間標題文字 -->
<view class="title">
{{title}}
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
height: 0,
paddingTop: 0,

}
},
// props: ["title", "back"],
props:{
title:{ // 標題文字(預設為空)
type:String,
default:''
},
color:{ // 標題和返回按鈕顏色(預設白色)
type:String,
default:'#111'
},
//建議使用background 因為使用backgroundColor，會導致不識別漸變顏色
background:{ // 背景顏色(不傳值預設透明)
type:String,
default:'transparent'
},
back:{ // 是否顯示返回按鈕(不傳值預設不顯示)
type:Boolean,
default:false
},
},

created() {
const demo = uni.getMenuButtonBoundingClientRect()
this.height = demo.height + "px"
this.paddingTop = demo.top + "px"

},
methods: {
// 左側返回按鈕呼叫
onBack() {
console.log(6666)
this.$emit("onBack")
},

onBack2() {
console.log(555)
uni.navigateBack({
delta:2
})
}
}
}
</script>
<style lang="less">
.demo {
position: relative;//注意，建議使用相對定位，因為固定定位會脫離文件流，然後你還要去設定marginTop值
// position: fixed;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
z-index: 100;
padding-bottom: 10rpx;

.left {
float: left;
position: absolute;
width: 100rpx;
height: 50rpx;
top: 0;
bottom: 0;
left: 20rpx;
color: #fff;
margin: auto;
}

.title {
font-size: 36rpx;
font-family: Source Han Sans CN;
// color: #FFFFFF;
}
}
</style>

名錶維修服務中心：http://www.025lct.com/
手錶維修保養：http://www.025lct.com/
手錶維修服多中心：http://www.kmhdlzb.com/
手錶維修門店：http://www.kmhdlzb.com/
寶璣手錶維修中心：http://www.longcaiteng.com/
勞力士手錶維修中心：http://www.longcaiteng.com/
浪琴手錶維修售後服務中心：http://watch.025lct.com/
手錶維修服務中心：http://watch.025lct.com/

相關文章