【小程序系列】使用Mixins自动适配各种机型的头部距离

使用Mixins自动适配各种机型的头部

• • Q1：小程序各种机型的适配是不一样的
  • Q2：每个页面都需要用到，不能每个页面都写一遍计算吧
  • A2：创建mixins.js文件
  • Q3：如何使用呢

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>