You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
11 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="status_bar">
|
||
|
|
<!-- 这里是状态栏 -->
|
||
|
|
</view>
|
||
|
|
<view style="height: 86upx">
|
||
|
|
<u-sticky offset-top="0" v-if="stickyShow">
|
||
|
|
<u-navbar
|
||
|
|
:is-back="false"
|
||
|
|
:title="navTitle"
|
||
|
|
:bgColor="background"
|
||
|
|
:titleStyle="titleStyle"
|
||
|
|
>
|
||
|
|
<view slot="left">
|
||
|
|
<u-icon
|
||
|
|
name="arrow-left"
|
||
|
|
v-if="isBack"
|
||
|
|
color="#fff"
|
||
|
|
size="26"
|
||
|
|
@click="navigateBack"
|
||
|
|
></u-icon>
|
||
|
|
</view>
|
||
|
|
<view v-if="slotRight" slot="right">
|
||
|
|
<slot name="right"></slot>
|
||
|
|
</view>
|
||
|
|
</u-navbar>
|
||
|
|
</u-sticky>
|
||
|
|
<u-navbar
|
||
|
|
:is-back="false"
|
||
|
|
:title="navTitle"
|
||
|
|
:bgColor="background1"
|
||
|
|
:titleStyle="titleStyle"
|
||
|
|
>
|
||
|
|
<view slot="left">
|
||
|
|
<u-icon
|
||
|
|
name="arrow-left"
|
||
|
|
v-if="isBack"
|
||
|
|
color="#fff"
|
||
|
|
size="26"
|
||
|
|
@click="navigateBack"
|
||
|
|
></u-icon>
|
||
|
|
</view>
|
||
|
|
<view v-if="slotRight" slot="right">
|
||
|
|
<slot name="right"></slot>
|
||
|
|
</view>
|
||
|
|
</u-navbar>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "navBar",
|
||
|
|
props: {
|
||
|
|
isBack: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
navTitle: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
stickyShow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
backToUrl: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
slotRight: false,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
background: "rgb(16,16,16,0.2)",
|
||
|
|
background1: "rgb(16,16,16,0.2)",
|
||
|
|
titleStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: "36upx",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
navigateBack(params) {
|
||
|
|
const pages = getCurrentPages();
|
||
|
|
if (this.backToUrl.length > 0) {
|
||
|
|
console.log(this.backToUrl);
|
||
|
|
uni.navigateTo({
|
||
|
|
url: this.backToUrl,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
if (pages.length === 1) {
|
||
|
|
if (typeof params === "number") {
|
||
|
|
history.go(-params);
|
||
|
|
} else {
|
||
|
|
history.back();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
uni.navigateBack();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.status_bar {
|
||
|
|
height: var(--status-bar-height);
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|