评论

mina-popups 小程序弹出组件集合

微信小程序实用弹出组件集合,可以快速实现 气泡菜单、tooltip提示、胶囊提示等,在popup的基础上还可以快速完成其他业务弹层组件

mina-popups

mina-popups,一个方便、轻量的 小程序 弹出组件集合

change log:

  1. 2021.02.22 init package

层叠顺序规范

mask: 100
popups: 200

所以 page 下一层的业务样式层叠顺序层级应 < 100

主要的组件

popup

  • 组件整合 popup 的通用逻辑:弹出位置,背景 mask,函数式控制显隐
  • 并对 fixed 模式升级,不仅支持直接传入 left、top 控制 popup 位置,还支持传入 selector 自动设置 popup 位置
left top right bottom center
fixed selector fixed left&top

popover

  • popup 的基础上,完善气泡菜单的通用逻辑
  • 使用者只需要在 slot 里添加提示或者菜单内容即可
  • popover 会根据触发位置自动改变展示方向
气泡菜单 tooltip

menu-popover

  • popover 的基础上,针对小程序引导添加我的小程序的场景,自动将 popover 定位到小程序胶囊下方
  • 组件自动识别页面 navigationStyle: custom 属性,优化展示位,使用者无需关心适配问题
    胶囊气泡

使用方法

大致可以分为 2 步:

  1. npm 安装 mina-popups,开发工具构建 npm
  2. 引入并使用 mina-popups 组件

命令行

npm install mina-popups
安装完成后,开发工具构建 npm

*.json

{
  "usingComponents": {
    "popup": "mina-popups/popup",
    "popover": "mina-popups/popover",
    "menu-popover": "mina-popups/menu-popover"
  }
}

*.wxml

在 view 上利用 popups 处理渲染逻辑
具体属性使用介绍请点击文章下方Github连接进行查看

<popup
  show="{{popup.show}}"
  position="{{popup.position}}"
  mask="{{popup.mask}}"
  catchScroll="{{popup.catchScroll}}"
  tapMaskClose="{{popup.tapMaskClose}}"
  scrollMaskClose="{{popup.scrollMaskClose}}"
  maskColor="{{popup.maskColor}}"
  selector="{{popup.selector}}"
  left="{{popup.left}}"
  top="{{popup.top}}"
  unit="{{popup.unit}}"
  bind:position="position"
>
  <!-- popup-inner-wxml -->
</popup>

<popover
  show="{{popover.show}}"
  mask="{{popover.mask}}"
  catchScroll="{{popover.catchScroll}}"
  tapMaskClose="{{popover.tapMaskClose}}"
  scrollMaskClose="{{popover.scrollMaskClose}}"
  maskColor="{{popover.maskColor}}"
  left="{{popover.left}}"
  top="{{popover.top}}"
  unit="{{popover.unit}}"
  translateX="{{popover.translateX}}"
>
  <!-- popover-inner-wxml -->
</popover>

<menu-popover show="{{show}}">
  <!-- menu-popover-inner-wxml -->
</menu-popover>

具体属性使用介绍请点击文章下方Github连接进行查看

注意事项

  1. popups 对于层叠顺序的设计为:mask-100,popup-200,所以为了保证 popups 在页面不被遮挡,Page 下一层的业务样式层叠顺序不要超过 100。

以上简单几步即可使用 mina-popups

具体使用请查看Github https://github.com/Yrobot/mina-popups

如果喜欢mina-popups,记得在github点个 start 哦!🌟🌟🌟

最后一次编辑于  2021-02-22  
点赞 2
收藏
评论
登录 后发表内容