apicloud apicloud

注册
查看: 1006|回复: 7

[模块教程] MNPopups 模块demo分享

老司机

UID:673413

主题:
175
帖子:
12677
云币:
5649

圣诞节

[模块教程] MNPopups 模块demo分享

1006 7 | 发表于 2018-11-13 13:31:14 |阅读模式 | |
本帖最后由 得呤 于 2019-3-8 10:40 编辑

MNPopups 封装了一个带有指针的弹出气泡式菜单,开发者可通过制定指针位置来自定义气泡弹出位置及其方向。亦可通过 open 接口内 styles 参数 pointer 字段来指定指针在弹出气泡的位置。

本模块所弹出的菜单依附于当前主窗口,其生命周期也同当前主窗口。点击非菜单区域可以动画的形式隐藏该菜单栏。同时支持列表项的增、删、改,支持批量更新数据。

如果列表项太多而超过模块弹出气泡区域,则用户可上下滚动查看。若开发者指定的参数使气泡菜单超出当前屏幕,则模块内部会自动重新调整该气泡的布局,使其显示在当前屏幕可视区域以内。

文档链接

open

打开
  1. var mnPopups = api.require('MNPopups');
  2. mnPopups.open({
  3.     rect: {
  4.         w: 100,
  5.         h: 180
  6.     },
  7.     position: {
  8.         x: api.winWidth - 10,
  9.         y: 0
  10.     },
  11.     styles: {
  12.       
  13.     },
  14.     datas: [{
  15.         title: '添加朋友"
  16.     }, {
  17.         title: '扫一扫'
  18.     }, {
  19.         title: '面对面快传'
  20.     }],
  21.     animation: true
  22. }, function(ret) {
  23.     if (ret) {
  24.         alert(JSON.stringify(ret));
  25.     }
  26. });
复制代码
reloadData

刷新 MNPopups 列表数据
  1. var mnPopups = api.require('MNPopups');
  2. mnPopups.reloadData({
  3.     datas: [{
  4.         title: '添加群'
  5.     }, {
  6.         title: '发送到电脑'
  7.     }]
  8. });
复制代码
deleteItem

从菜单列表中移除指定索引的数据
  1. var mnPopups = api.require('MNPopups');
  2. mnPopups.deleteItem({
  3.     index: 1
  4. });
复制代码
insertItem

从菜单列表中的指定位置插入数据
  1. var mnPopups = api.require('MNPopups');
  2. mnPopups.insertItem({
  3.     index: 1,
  4.     data: {
  5.         title: '创建讨论组'
  6.     }
  7. });
复制代码
updateItem

更新指定分组中指定位置的数据
  1. var mnPopups = api.require('MNPopups');
  2. mnPopups.updateItem({
  3.     index: 1,
  4.     data: {
  5.         title: '付款'
  6.     }
  7. });
复制代码
close

关闭 MNPopups 列表视图
  1. var obj = api.require('MNPopups');
  2. obj.close();
复制代码
show

显示已隐藏的 MNPopups 列表视图
  1. var mnPopups = api.require('MNPopups');
  2. mnPopups.show();
复制代码
hide

隐藏 MNPopups 列表视图,并没有从内存里清除
  1. var mnPopups = api.require('MNPopups');
  2. mnPopups.hide();
复制代码





本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

新手上路

UID:629393

主题:
23
帖子:
96
云币:
98
发表于 2019-3-4 20:39:23 |
怎么让菜单随着frame的滚动而改变打开时的定位呢?

老司机

UID:673413

主题:
175
帖子:
12677
云币:
5649

圣诞节

 楼主| 发表于 2019-3-5 10:55:57 |
是要改变模块位置吗

主题:
7
帖子:
26
云币:
70
发表于 2019-3-6 16:22:22 |
好像这个模块的图标大小没法调整,一定要ui扣的刚刚好才行

老司机

UID:673413

主题:
175
帖子:
12677
云币:
5649

圣诞节

 楼主| 发表于 2019-3-6 16:25:13 |
忽上忽下 发表于 2019-3-6 16:22
好像这个模块的图标大小没法调整,一定要ui扣的刚刚好才行

        w: 25,                   //(可选项)数字类型;图标的宽度;默认:25
            h: 25,                   //(可选项)数字类型;图标的高度;默认:同 w

老司机

UID:673413

主题:
175
帖子:
12677
云币:
5649

圣诞节

 楼主| 发表于 2019-3-6 16:26:09 |
调整一下style样式试试呢

主题:
7
帖子:
26
云币:
70
发表于 2019-3-6 16:28:20 |
得呤 发表于 2019-3-6 16:25
w: 25,                   //(可选项)数字类型;图标的宽度;默认:25
            h: 25,     ...

好的,谢谢,没看清楚

驾校小白

UID:765507

主题:
0
帖子:
1
云币:
1
发表于 2019-3-22 10:29:31 |
点击触发事件怎么写
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表