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.
66 lines
1.6 KiB
66 lines
1.6 KiB
1 year ago
|
<template>
|
||
|
|
<view class="safe-area" :style="{height:safeHeight,display:((type !== 'sticky') || 'none')}"></view>
|
||
|
|
<view class="m-sticky-container" :style="{top:offsetHeightValue,position:type,zIndex: zIndex}">
|
||
|
|
<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 += 44;
|
||
|
|
// #endif
|
||
|
|
return offsetHeight;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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.offSetDefault,false))+parseFloat(uni.$m.getPx(this.offsetTop,false))+'px')
|
||
|
|
this.$emit('change',true);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getSafeHeight();
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.safe-area{
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
.m-sticky-container{
|
||
|
|
width:100%;
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|