You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.8 KiB
79 lines
1.8 KiB
<template> |
|
<view class="safe-area" :style="{height:safeHeight,display:((type !== 'sticky') ? 'block' : 'none')}"></view> |
|
<view class="m-sticky-container" :style="containerStyle"> |
|
<slot /> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import props from './props.js'; |
|
/** |
|
* Sticky 吸顶 |
|
* @description 警告提示，展现需要关注的信息。 |
|
* |
|
* @property {String} title 显示的文字 |
|
*/ |
|
export default { |
|
name: 'm-sticky', |
|
mixins: [props], |
|
data() { |
|
return { |
|
show: true, |
|
safeHeight:'', |
|
offsetHeightValue:'0', |
|
} |
|
}, |
|
computed: { |
|
offSetDefault(){ |
|
let offsetHeight = uni.getSystemInfoSync().statusBarHeight; |
|
// #ifdef MP-WEIXIN |
|
offsetHeight += 40; |
|
// #endif |
|
return offsetHeight; |
|
}, |
|
containerStyle() { |
|
let style = { |
|
position: this.type, |
|
zIndex: this.zIndex |
|
} |
|
if(this.mode === 'bottom'){ |
|
style.bottom = this.offsetHeightValue; |
|
}else{ |
|
style.top = this.offsetHeightValue; |
|
} |
|
return style; |
|
} |
|
}, |
|
methods: { |
|
getSafeHeight(){ |
|
new Promise((resolve) => { |
|
uni.$m.sleep(10).then(() => { |
|
const info = uni.createSelectorQuery().in(this).select('.m-sticky-container'); |
|
info.boundingClientRect(function (data) { |
|
resolve(data.height); |
|
}).exec(function (res) {}); |
|
}); |
|
}).then((height) => { |
|
this.safeHeight = height+'px'; |
|
this.offsetHeightValue = (parseFloat( |
|
uni.$m.getPx((this.mode === 'top') ?(this.top || this.offSetDefault) :0,false)) |
|
+ parseFloat(uni.$m.getPx(this.offset,false))+'px') |
|
this.$emit('change',true); |
|
}) |
|
}, |
|
}, |
|
mounted() { |
|
this.getSafeHeight(); |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.safe-area{ |
|
width:100%; |
|
} |
|
.m-sticky-container{ |
|
width:100%; |
|
|
|
} |
|
</style>
|
|
|