|
@@ -1,10 +1,14 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <slot name="header"></slot>
|
|
|
- <view class="main">
|
|
|
+ <view class="fs-container">
|
|
|
+ <view class="fs-container-header">
|
|
|
+ <slot name="header"></slot>
|
|
|
+ </view>
|
|
|
+ <view class="fs-container-main" :style="{paddingTop: top + 'px',paddingBottom: bottom + 'px'}">
|
|
|
<slot></slot>
|
|
|
</view>
|
|
|
- <slot name="footer"></slot>
|
|
|
+ <view class="fs-container-footer">
|
|
|
+ <slot name="footer"></slot>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -13,12 +17,37 @@
|
|
|
name:"fs-container",
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ top: 0,
|
|
|
+ bottom: 0
|
|
|
};
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ uni.createSelectorQuery().in(this).select('.fs-container-header').boundingClientRect(data => {
|
|
|
+ this.top = data.height
|
|
|
+ }).exec()
|
|
|
+ uni.createSelectorQuery().in(this).select('.fs-container-footer').boundingClientRect(data => {
|
|
|
+ this.bottom = data.height
|
|
|
+ }).exec()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-
|
|
|
+<style lang="scss" scoped>
|
|
|
+.fs-container{
|
|
|
+ &-header{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-footer{
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|