185 lines
6.5 KiB
Vue
185 lines
6.5 KiB
Vue
<template>
|
|
<view class="_header_all" v-if="headershow">
|
|
<template v-if="mode=='title'">
|
|
<view class="_header_title bg2" :style="{height:header_statusbar_height+'px'}"></view>
|
|
<view class="_header_title bg2" :style="{height:header_title_height+'px',lineHeight:header_title_height+'px'}">
|
|
<view class="_header_btn">
|
|
<view v-if="hasbackbtn" @tap="goback" class="_header_title_btn">
|
|
<view class="itm _back"></view>
|
|
</view>
|
|
<view v-else @tap="gourl" :data-url="mainpage" class="_header_title_btn">
|
|
<view class="itm _home"></view>
|
|
</view>
|
|
</view>
|
|
<slot>
|
|
<view class="_header_title_text" :style="{margin:'0 '+header_title_margin+'px'}">{{title}}</view>
|
|
</slot>
|
|
</view>
|
|
</template>
|
|
<template v-if="mode=='tran'">
|
|
<view class="_header_title" :style="{height:header_statusbar_height+'px'}"></view>
|
|
<view class="_header_title" :style="{height:header_title_height+'px',lineHeight:header_title_height+'px'}">
|
|
<view class="_header_btn">
|
|
<view v-if="hasbackbtn" @tap="goback" class="_header_tran_btn">
|
|
<view class="itm _back"></view>
|
|
</view>
|
|
<view v-else @tap="gourl" :data-url="mainpage" class="_header_tran_btn">
|
|
<view class="itm _home"></view>
|
|
</view>
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
<template v-if="mode=='scroll'">
|
|
<view :style="{opacity:opac}" style="background:linear-gradient(21deg, var(--e-headerbg1), var(--e-headerbg2));">
|
|
<view class="_header_title" :style="{height:header_statusbar_height+'px'}"></view>
|
|
<view class="_header_title" :style="{height:header_title_height+'px',lineHeight:header_title_height+'px'}">
|
|
<view class="_header_btn">
|
|
<view v-if="hasbackbtn" @tap="goback" class="_header_title_btn">
|
|
<view class="itm _back"></view>
|
|
</view>
|
|
<view v-else @tap="gourl" :data-url="mainpage" class="_header_title_btn">
|
|
<view class="itm _home"></view>
|
|
</view>
|
|
</view>
|
|
<slot>
|
|
<view class="_header_title_text" :style="{margin:'0 '+header_title_margin+'px'}">{{title}}</view>
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view :style="{height:seatheight+'px'}" v-if="headershow"></view>
|
|
</template>
|
|
<style scoped>
|
|
._header_all {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 990;
|
|
color: var(--txt9);
|
|
}
|
|
|
|
._header_title {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
._header_btn {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
._header_title_text {
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
._header_title_btn {
|
|
padding: 0.3em;
|
|
margin-left: 0.1em;
|
|
}
|
|
|
|
._header_title_btn>.itm {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
|
|
|
|
._header_tran_btn {
|
|
padding: 0.3em;
|
|
margin-left: 0.3em;
|
|
border-radius: 50%;
|
|
background-color: #dddddd88;
|
|
}
|
|
|
|
._header_tran_btn>.itm {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
|
|
._back {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTc0NC4zMzcyNTYzIDEwMTcuMTM2OTI0NDVjMTEuMTI4OTgzNyAwIDIyLjI3MDEwMzctNC4yNDc3MDM3IDMwLjc2NTUxMTExLTEyLjc0MzExMTEyIDE2Ljk5MDgxNDgyLTE2Ljk5MDgxNDgyIDE2Ljk5MDgxNDgyLTQ0LjU0MDIwNzQxIDAtNjEuNTE4ODg1OTJMMzQ1LjAyODgzNTU1IDUxMi44MDA5OTU1NSA3NzUuMTAyNzY3NDEgODIuNzM5MmMxNi45OTA4MTQ4Mi0xNi45Nzg2Nzg1MiAxNi45OTA4MTQ4Mi00NC41NDAyMDc0MSAwLTYxLjUxODg4NTkyLTE2Ljk5MDgxNDgyLTE2Ljk5MDgxNDgyLTQ0LjUyODA3MTExLTE2Ljk5MDgxNDgyLTYxLjUxODg4NTkzIDBMMjUyLjc0NDQzODUyIDQ4Mi4wNDc2MjA3NWE0My41MTQ2OTAzNyA0My41MTQ2OTAzNyAwIDAgMCAwIDYxLjUzMTAyMjIybDQ2MC44Mzk0NDI5NiA0NjAuODE1MTcwMzZjOC40ODMyNzExMSA4LjQ5NTQwNzQxIDE5LjYyNDM5MTExIDEyLjc0MzExMTExIDMwLjc1MzM3NDgyIDEyLjc0MzExMTEyeiI+PC9wYXRoPjwvc3ZnPg==");
|
|
}
|
|
|
|
._home {
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIzMC40IDk5MmMtNjQgMC0xMTUuMi01MS4yLTExNS4yLTExNS4yTDExNS4yIDU0NCA3Ni44IDU4Mi40QzcwLjQgNTg4LjggNTcuNiA1OTUuMiA0NC44IDU5NS4yYy0xMi44IDAtMjUuNi02LjQtMzItMTIuOEM2LjQgNTY5LjYgMCA1NTYuOCAwIDU0NCAwIDUzNy42IDYuNCA1MjQuOCAxMi44IDUxMmw0NjcuMi00NjcuMkM0ODYuNCAzOC40IDQ5OS4yIDMyIDUxMiAzMnMyNS42IDYuNCAzMiAxMi44TDEwMTEuMiA1MTJDMTAxNy42IDUyNC44IDEwMjQgNTM3LjYgMTAyNCA1NDRjMCAxMi44LTYuNCAyNS42LTEyLjggMzItNi40IDYuNC0xOS4yIDEyLjgtMzIgMTIuOHMtMjUuNi02LjQtMzItMTIuOEw1MTIgMTQ3LjIgMjExLjIgNDQ4bDAgNDIyLjRjMCAxMi44IDEyLjggMjUuNiAyNS42IDI1LjZsMTE1LjIgMCAwLTE4NS42YzAtMjUuNiAxOS4yLTQ0LjggNDQuOC00NC44bDIzMC40IDBjMjUuNiAwIDQ0LjggMTkuMiA0NC44IDQ0LjhzLTE5LjIgNDQuOC00NC44IDQ0LjhMNDQxLjYgNzU1LjJsMCAxODUuNmMwIDI1LjYtMTkuMiA0NC44LTQ0LjggNDQuOEwyMzAuNCA5ODUuNnpNNjI3LjIgOTkyYy0yNS42IDAtNDQuOC0xOS4yLTQ0LjgtNDQuOCAwLTI1LjYgMTkuMi00NC44IDQ0LjgtNDQuOGwxNjAgMGMxMi44IDAgMjUuNi0xMi44IDI1LjYtMjUuNmwwLTI1NmMwLTI1LjYgMTkuMi00NC44IDQ0LjgtNDQuOCAyNS42IDAgNDQuOCAxOS4yIDQ0LjggNDQuOGwwIDI1NmMwIDY0LTUxLjIgMTE1LjItMTE1LjIgMTE1LjJMNjI3LjIgOTkyeiIgZmlsbD0iIzc3Nzc3NyI+PC9wYXRoPjwvc3ZnPg==");
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: 'title'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
headershow: true,
|
|
hasbackbtn: false,
|
|
header_statusbar_height: 0,
|
|
header_title_height: 40,
|
|
header_title_margin: 0,
|
|
mainpage: '',
|
|
opac: 0,
|
|
};
|
|
},
|
|
watch: {},
|
|
computed: {
|
|
seatheight() {
|
|
if (this.mode == 'title')
|
|
return this.header_statusbar_height + this.header_title_height;
|
|
return 0;
|
|
}
|
|
},
|
|
mounted() {
|
|
//#ifdef H5
|
|
if (process.env.NODE_ENV !== 'development') {
|
|
this.headershow = false;
|
|
return;
|
|
}
|
|
//#endif
|
|
var app = getApp();
|
|
this.header_statusbar_height = app.globalData._header_statusbar_height;
|
|
this.header_title_height = app.globalData._header_title_height;
|
|
this.header_title_margin = app.globalData._header_title_margin;
|
|
this.mainpage = app.globalData.mainpage;
|
|
if (getCurrentPages().length > 1)
|
|
this.hasbackbtn = true;
|
|
this.scrollname = this.title;
|
|
if (this.mode == 'scroll')
|
|
app.globalData.scrollcbs['header' + this.scrollname] = e => {
|
|
var sc = e.scrollTop - this.header_statusbar_height - this.header_title_height;
|
|
if (sc < 0) {
|
|
this.opac = 0;
|
|
} else if (sc < this.header_title_height) {
|
|
this.opac = sc / this.header_title_height;
|
|
} else {
|
|
this.opac = 1;
|
|
}
|
|
}
|
|
},
|
|
unmounted() {
|
|
if (this.mode == 'scroll')
|
|
delete getApp().globalData.scrollcbs['header' + this.scrollname];
|
|
},
|
|
methods: {
|
|
Getheight() {
|
|
return this.seatheight;
|
|
},
|
|
goback() {
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
}
|
|
</script> |