Gaoxs
4 years ago
3 changed files with 148 additions and 133 deletions
@ -1,65 +1,71 @@
|
||||
<template> |
||||
<view> |
||||
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]"> |
||||
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]"> |
||||
<view class="action" @tap="BackPage" v-if="isBack"> |
||||
<text class="cuIcon-back"></text> |
||||
<slot name="backText"></slot> |
||||
</view> |
||||
<view class="content" :style="[{top:StatusBar + 'px'}]"> |
||||
<slot name="content"></slot> |
||||
</view> |
||||
<slot name="right"></slot> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
StatusBar: this.StatusBar, |
||||
CustomBar: this.CustomBar |
||||
}; |
||||
}, |
||||
name: 'cu-custom', |
||||
computed: { |
||||
<template> |
||||
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]"> |
||||
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]"> |
||||
<view class="action" @tap="BackPage" v-if="isBack"> |
||||
<text class="cuIcon-back"></text> |
||||
<slot name="backText"></slot> |
||||
</view> |
||||
<view class="content" :style="[{top:StatusBar + 'px'}]"> |
||||
<slot name="content"></slot> |
||||
</view> |
||||
<slot name="right"></slot> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
StatusBar: this.StatusBar, |
||||
CustomBar: this.CustomBar |
||||
}; |
||||
}, |
||||
name: 'cu-custom', |
||||
computed: { |
||||
style() { |
||||
var StatusBar= this.StatusBar; |
||||
var CustomBar= this.CustomBar; |
||||
var bgImage = this.bgImage; |
||||
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`; |
||||
if (this.bgImage) { |
||||
style = `${style}background-image:url(${bgImage});`; |
||||
} |
||||
return style |
||||
} |
||||
}, |
||||
props: { |
||||
bgColor: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
isBack: { |
||||
type: [Boolean, String], |
||||
default: false |
||||
}, |
||||
bgImage: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
}, |
||||
methods: { |
||||
BackPage() { |
||||
uni.navigateBack({ |
||||
delta: 1 |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
console.log(this) |
||||
var StatusBar = this.StatusBar; |
||||
var CustomBar = this.CustomBar; |
||||
var bgImage = this.bgImage; |
||||
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;background:${this.bgColor} ;`; |
||||
if (this.bgImage) { |
||||
style = `${style}background-image:url(${bgImage});`; |
||||
} |
||||
return style |
||||
} |
||||
}, |
||||
props: { |
||||
bgColor: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
isBack: { |
||||
type: [Boolean, String], |
||||
default: false |
||||
}, |
||||
bgImage: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
}, |
||||
methods: { |
||||
BackPage() { |
||||
uni.navigateBack({ |
||||
delta: 1 |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.fixed{ |
||||
position: fixed; |
||||
top:0; |
||||
left:0; |
||||
right:0; |
||||
z-index: 99; |
||||
|
||||
} |
||||
</style> |
||||
|
Loading…
Reference in new issue