mp-components--safer-ipx-page v0.0.4

mp-components--safer-ipx-page

这是一个微信小程序自定义组件。
使用场景：想要避免页面内容和iphone x的底部黑线重叠

Usage

1. yarn add mp-components--safer-ipx-page
2. app.json:

   {
     "usingComponents": {
       "safer-ipx-page": "mp-components--safer-ipx-page"
     }
   }

3. 你的页面.wxml：

   <safer-ipx-page safer-ipx-page-class="my-page" pageHeight="300px">
     原先page组件下的内容写在这里面
   </safer-ipx-page>

4. 开发工具内 工具 --> 构建npm

Properties

以下是该组件接受的参数 1. optional safer-ipx-page-class(string)：原本给page组件的class现写给该属性 2. optional pageHeight(string)：设置该组件的高度值(默认是100vh)。可传入合法的css高度值，比如'100px'，也可传入css变量，也可以是calc()

Warning

1. 当你的页面使用了fixed+bottom布局时，请将其改为absolute+bottom形式，因为fixed布局是相对于原页面布局的，会使该组件失效