1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| <template>
| <full-page-layout :gradient="gradient" :base-background-color="baseBackgroundColor" :gradient-value="gradientValue" :safety="safety" :full="full">
| <view class="header-page-containter">
| <view class="header-page-containter-header">
| <page-header :color="headerColor" :gradient="headerGradient" :gradient-value="headerGradientValue" :background-color="headerBackgroundColor" @click="onHeaderAsideClick">
| <template v-slot:left v-if="$scopedSlots.headerleft"><slot name="headerleft"></slot></template>
| {{title}}
| <template v-slot:right v-if="$scopedSlots.headerright"><slot name="headerright"></slot></template>
| </page-header>
| </view>
| <view class="header-page-containter-body" :style="{backgroundColor:backgroundColor}">
| <slot></slot>
| </view>
| <view class="header-page-footer" :style="{backgroundColor:backgroundColor}">
| <slot name="footer"></slot>
| </view>
| </view>
| </full-page-layout>
| </template>
|
| <script>
| import FullPageLayout from './FullPageLayout.vue'
| import PageHeader from './PageHeader.vue'
| export default {
| name:'headerPageCompontent',
| emits:['headerclick'],
| components:{FullPageLayout,PageHeader},
| props:{
| /* 是否启用底色渐变（backgroundImage） */
| gradient:{
| type:Boolean,
| default:false
| },
| /* 底色渐变(backgroundImage)值，css语法，default时使用默认渐变色 */
| gradientValue:{
| type:String,
| default:'default'
| },
| backgroundColor:{
| type:String,
| default:''
| },
| baseBackgroundColor:{
| type:String,
| default:''
| },
| safety:{
| type:Boolean,
| default:true
| },
| title:{
| type:String,
| default:'Title'
| },
| headerColor:{
| type:String,
| default:'#212121'
| },
| /* 头部是否启用底色渐变（backgroundImage） */
| headerGradient:{
| type:Boolean,
| default:false
| },
| /* 头部底色渐变(backgroundImage)值，css语法，default时使用默认渐变色 */
| headerGradientValue:{
| type:String,
| default:'default'
| },
| headerBackgroundColor:{
| type:String,
| default:''
| },
| full:{
| type:Boolean,
| default:true
| }
| },
| data(){
| return {
| bodyHeight:0
| }
| },
| methods:{
| onHeaderAsideClick(type){
| console.log(type,'11111')
| this.$emit('headerclick',type)
| },
| getBodyHeight(){
| return this.bodyHeight
| }
| },
| mounted() {
| const query = uni.createSelectorQuery().in(this);
| query.select('.header-page-containter-body').boundingClientRect(data => {
| this.bodyHeight = data.height
| }).exec();
| }
| }
| </script>
|
| <style scoped lang="scss">
| .header-page-containter{
| height: 100%;
| display: flex;
| flex-direction: column;
| overflow: hidden;
| .header-page-containter-header,.header-page-footer{
| flex-shrink: 0;
| }
| .header-page-containter-body{
| flex-grow: 1;
| overflow: auto;
| }
| }
| </style>
|
|
