10 changed files with 221 additions and 30 deletions
@ -0,0 +1,58 @@
|
||||
<template> |
||||
<view class="safe-area" :style="{height:safeHeight,display:((type !== 'sticky') ?'block': 'none')}"></view> |
||||
<view class="mz-sticky-container" :style="{top:(offsetTop === '0')?offSetDefault:offsetTop,position:type}"> |
||||
<slot></slot> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import props from './props.js'; |
||||
/** |
||||
* Sticky 吸顶 |
||||
* @description 警告提示，展现需要关注的信息。 |
||||
* |
||||
* @property {String} title 显示的文字 |
||||
*/ |
||||
export default { |
||||
name: 'mz-sticky', |
||||
mixins: [props], |
||||
data() { |
||||
return { |
||||
show: true, |
||||
safeHeight:0 |
||||
} |
||||
}, |
||||
computed: { |
||||
offSetDefault(){ |
||||
return uni.getSystemInfoSync().statusBarHeight+44+'px'; |
||||
}, |
||||
}, |
||||
methods: { |
||||
getSafeHeight(){ |
||||
new Promise((resolve,reject) => { |
||||
setTimeout(()=>{ |
||||
const info = uni.createSelectorQuery().in(this).select('.mz-sticky-container'); |
||||
info.boundingClientRect(function (data) { |
||||
resolve(data.height); |
||||
}).exec(function (res) {}); |
||||
},50) |
||||
}).then((height) => { |
||||
this.safeHeight = height+'px'; |
||||
}) |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.getSafeHeight(); |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.safe-area{ |
||||
width:100%; |
||||
} |
||||
.mz-sticky-container{ |
||||
width:100%; |
||||
z-index: 997; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,17 @@
|
||||
export default { |
||||
props: { |
||||
// 是否占位
|
||||
safeArea: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
type: { |
||||
type: String, |
||||
default: 'fixed' |
||||
}, |
||||
offsetTop: { |
||||
type: String, |
||||
default: '0' |
||||
}, |
||||
} |
||||
} |
||||
@ -0,0 +1,83 @@
|
||||
{ |
||||
"id": "mz-card", |
||||
"displayName": "mz-card 卡片", |
||||
"version": "1.0.1", |
||||
"description": "mz-card", |
||||
"keywords": [ |
||||
"卡片" |
||||
], |
||||
"repository": "", |
||||
"engines": { |
||||
"HBuilderX": "^3.1.0" |
||||
}, |
||||
"dcloudext": { |
||||
"type": "component-vue", |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "插件不采集任何数据", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": [ |
||||
|
||||
], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
}, |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "y" |
||||
}, |
||||
"H5-mobile": { |
||||
"Safari": "y", |
||||
"Android Browser": "y", |
||||
"微信浏览器(Android)": "y", |
||||
"QQ浏览器(Android)": "y" |
||||
}, |
||||
"H5-pc": { |
||||
"Chrome": "y", |
||||
"IE": "y", |
||||
"Edge": "y", |
||||
"Firefox": "y", |
||||
"Safari": "y" |
||||
}, |
||||
"小程序": { |
||||
"微信": "y", |
||||
"阿里": "y", |
||||
"百度": "y", |
||||
"字节跳动": "y", |
||||
"QQ": "y", |
||||
"钉钉": "u", |
||||
"快手": "u", |
||||
"飞书": "u", |
||||
"京东": "u" |
||||
}, |
||||
"快应用": { |
||||
"华为": "u", |
||||
"联盟": "u" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue