mp-components--safer-ipx-page

0.0.4 • Public • Published

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布局是相对于原页面布局的,会使该组件失效

Readme

Keywords

none

Package Sidebar

Install

npm i mp-components--safer-ipx-page

Weekly Downloads

7

Version

0.0.4

License

MIT

Unpacked Size

302 kB

Total Files

14

Last publish

Collaborators

  • xhmm