uni-app标题栏的封装

<template name="titleModule">     <view>         <view class="title-padding"></view>         <!-- 没有返回的 -->         <view class="middle-title" v-if="showNum==0">             <view class="middle-title-text">                 {{titleText}}             </view>         </view>         <!-- 有返回的 -->         <view class="middle-title" v-if="showNum==1">             <view class="back-title-lock">                 <text @click="back">{{backText}}</text>                 <view class="back-title-text">{{titleText}}</view>             </view>                                   </view>     </view> </template>

<script>     export default {         name:'titleModule',         data() {             return {                 backText:'返回'             }         },         props:{             titleText:'',             showNum:''         },         methods:{             back(){                 uni.navigateBack({                     delta:1                 })             },         }     } </script>

<style> .title-padding{     height: var(--status-bar-height);     background: #FFFFFF 100%; } .middle-title{     background: #FFFFFF 100%;     height: 88rpx;     border-bottom: 2rpx solid #F0F0F0; } .middle-title-text{     display: flex;     flex-direction: row;     justify-content: center;     align-items: center;     font-size: 32rpx;     color: #171F24;     height: 88rpx; } .back-title-lock{     display: flex;     flex-direction: row;     align-items: center;     line-height: 88rpx;     padding-left: 40rpx; } .back-title-text{     margin-left: 40rpx;     overflow: hidden;     width: 500rpx;     white-space: nowrap;     text-overflow: ellipsis; } </style>

import titleModule from '../../components/titleModule.vue'

<titleModule :titleText="me" :showNum="meTitleNum"></titleModule>

自己在data里定义参数的动态值

参数就看props里的传入就可以了，有两种标题，一个是单纯居中的，一个是带返回的。自行考量。