使用Mixins自动适配各种机型的头部
Q1:小程序各种机型的适配是不一样的
A1:
微信开发者工具里面是有各种各样的机型匹配
如果头部距离写死,可能会导致下面这种问题
iphone6-7是ok的,但是x以上就不行
Q2:每个页面都需要用到,不能每个页面都写一遍计算吧
A2:创建mixins.js文件
export default {
data() {
return {
totalHeight: 0,
tabsHeight: 0,
};
},
onLoad() {
const header = uni.getMenuButtonBoundingClientRect();
this.totalHeight = header.top + header.height + 19;
const query = uni.createSelectorQuery().in(this);
query
.select(".nav-bar")
.boundingClientRect(data => {
console.log('data', data)
this.tabsHeight = data ? data.height : 0;
})
.exec();
},
computed: {
navMarginTop() {
return (distance = 0) => {
return `${this.totalHeight + this.tabsHeight + distance}px`;
};
},
},
};
Q3:如何使用呢
A3:
1.引入
<script>
import NavMixins from "@/componentsPro/header-page/mixins.js";
export default {
mixins: [NavMixins],
}
</script>
2.使用
<view class="order-detail-contents" :style="{ marginTop: navMarginTop() }">
</view>