前言

• Hbuilder X 2.7.14.20200618

假設需求

在 【uni-app】自定義導航欄/標題欄 中提到，可以全局取消原生導航欄。全局取消原生導航欄后，就需要為每個頁面均添加一個自定義導航欄。

此時，可以將自定義導航欄封裝成uniapp組件，并在每個頁面中使用該組件。下面將該自定義導航欄封裝成組件。

組件封裝

組件名為：imgNavBar。

在項目目錄/components 目錄下添加imgNavBar組件。

imgNavBar.vue 代碼為。

<template><view><!-- 自定義導航欄 --><view class="navBarBox"><!-- 狀態欄占位 --><view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view><!-- 真正的導航欄內容 --><view class="navBar"><image class="logo" src="/static/logo.png" mode="scaleToFill"></image><view>我是導航欄標題</view></view></view></view> </template><script>export default {data() {return {// 狀態欄高度statusBarHeight: 0,// 導航欄高度navBarHeight: 82+11,};},props: {},//第一次加載時調用created() {//獲取手機狀態欄高度this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];},} </script><style> .navBarBox{} .navBarBox .statusBar {} .navBarBox .navBar {padding: 3rpx 50rpx;padding-bottom: 8rpx;display: flex;flex-direction: row;justify-content: center;align-items: center; } .navBarBox .navBar .logo {width: 82rpx;height: 82rpx;margin-right: 10rpx; } </style>

組件引用

在 pages/index/index 頁面中引用imgNavBar組件。

在 pages/index/index 頁面中導入組件。

<script>import imgNavBar from "@/components/imgNavBar/imgNavBar.vue";export default {components: {imgNavBar},data() {return {...};},...} </script>

在 pages/index/index 頁面中使用組件。

<template><view><!-- 自己封裝的導航欄組件 --><imgNavBar /><!-- 頁面內容 --><view>我是頁面內容</view></view> </template>

運行效果

參考

https://blog.csdn.net/qq_37902065/article/details/88662600

總結

以上是生活随笔為你收集整理的【uniapp】组件封装与引用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。