uniapp+vue2+uview2.0导航栏组件二次封装

样式

代码

<template>
<view class="navBar">
<u-navbar :title="title" :titleColor="titleColor" :bgColor="bgColor" :safeAreaInsetTop="safeAreaInsetTop"
:autoBack="true" @leftClick="leftClick" @rightClick="rightClick">
<view class="u-nav-slot" slot="left">
<u-icon name="arrow-left" size="19" v-if="isSubPage"></u-icon>
<u-icon name="home" size="20" v-if="!isSubPage"></u-icon>
</view>
</u-navbar>
<view style="height: 46px;" v-if="!placeholder"></view>
</view>
</template>

<script>
/**
 * NavBar导航
 * @description 二次封装u-navbar
 * @property {Boolean}safeAreaInsetTop是否开启顶部安全区适配
 * @property {Boolean}placeholder固定在顶部时，是否生成一个等高元素，以防止塌陷
 * @property {Boolean}fixed    导航栏是否固定在顶部
 * @property {Boolean}border    导航栏底部是否显示下边框
 * @property {String}leftIcon左边返回图标的名称
 * @property {String}leftText左边的提示文字
 * @property {String}rightText右边的提示文字
 * @property {String}rightIcon右边返回图标的名称，只能为uView自带的图标
 * @property {String}title            导航栏标题
 * @property {String}bgColor    导航栏背景设置
 * @property {String | Number}titleWidth    导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx
 * @property {String | Number}height    导航栏高度(不包括状态栏高度在内，内部自动加上)单位px
 * @property {String | Number}leftIconSize左侧返回图标的大小
 * @property {String}leftIconColor左侧返回图标的颜色
 * @property {Boolean}autoBack2.0.19    点击左侧区域(返回图标)，是否自动返回上一页
 * @property {String | Object}titleStyle 2.0.23标题的样式，对象或字符串形式
 * @event {Function}leftClick点击左侧区域触发
 * @event {Function}rightClick点击右侧区域触发
 * @example <navBar title="首页"/></navBar>
 */

export default {
name: "navBar",
props: {
title: {
type: String,
default: '娱乐'
},
titleColor: {
type: String,
default: '#000000'
},
bgColor: {
type: String,
default: '#ffffff'
},
safeAreaInsetTop: {
type: Boolean,
default: false
},
placeholder: {
type: Boolean,
default: false
},
fixed: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: false
},
},
data() {
return {
isSubPage: false, // 新增状态
};
},
methods: {
// 点击左侧区域
leftClick() {
if (this.isSubPage) {
uni.navigateBack();
} else {
uni.switchTab({
url: '/pages/index/index'
}); 
}
this.$emit('leftClick');
},
// 点击右侧区域
rightClick() {
this.$emit('rightClick');
},
},
mounted() {
// 检查当前页面是否为二级页面
let pages = getCurrentPages()
this.isSubPage = pages.length > 1;
}
}
</script>

<style lang="scss" scoped></style>

原文地址：https://blog.csdn.net/xulihua_75/article/details/144056789

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！