MNRotationMenu

setIndex hide clearCache

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

MNRotationMenu 是一个图片旋转轮播控件，实现了类似扑克牌效果的图片轮播展示。开发者可自定义图片的数量，点击图片时会有回调，比如开发者可以自定义点击跳转连接

open

打开图片旋转轮播控件

open({params}, callback(ret, err))

rect：

  • 类型：JSON 类型
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：

items：

  • 类型：数组类型
  • 描述：设置图片旋转轮播控件的图片项
  • 内部字段：
  2.     url: 'fs://rotation/0.png'   //字符串类型；图片路径，支持：fs://、widget://、http://等
  3. }]

styles：

  • 类型：JSON 对象
  • 描述：图片旋转轮播控件的样式设置
  • 内部字段：
  1. {
  2.     bg: '#fff',                        //（可选项）字符串类型；控件的背景，支持 rgb、rgba、#、img；默认：#fff
  3.     r: 190,                //（可选项）数字类型；控件所在圆的半径，即图片下边到圆心的距离；默认值：190
  4.     image:{                            //JSON 类型；图片的样式设置
  5.         w:80,                          //（可选项）数字类型；图片的显示宽度；默认:80
  6.         corner: 2,                     //（可选项）数字类型；图片圆角半径；默认：2.0
  7.         placeholder: 'fs://ph.png',    //（可选项）字符串类型；图片的占位图，支持 widget://、fs://；默认：未设置时不显示占位图
  8.     },
  9.     indicator: {                       //（可选项）JSON 类型；指示器的样式设置，若为空则不显示指示器 
  10.         bg: '#eee',                    //（可选项）字符串类型；指示器未激活时的背景，支持 rgb、rgba、#；默认：#eee
  11.         active: '#f00',                //（可选项）字符串类型；指示器激活时的背景，支持 rgb、rgba、#；默认：#eee
  12.     }
  13. }

index：

  • 类型：数字类型
  • 描述：（可选项）初始选中的图片索引值
  • 默认：items数组长度 / 2（向下取整）

auto：

  • 类型：布尔类型
  • 描述：（可选项）图片是否自动播放
  • 默认：false

interval：

  • 类型：数字类型
  • 描述：（可选项）图片每次切换的停留间隔，单位 ms（毫秒）；仅当 auto 为 true 时有效
  • 默认：3000
  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed:

  • 类型：布尔
  • 描述：（可选项）模块是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：

示例代码

  1. var MNRotationMenu = api.require('MNRotationMenu');
  2. MNRotationMenu.open({
  3.         rect: {
  4.             y: api.winHeight - 180,
  5.             w: api.winWidth,
  6.             h: 180
  8.         items: [{
  9.             url: 'fs://rotation/0.png'
  10.         }, {
  11.             url: 'fs://rotation/1.png'
  12.         }, {
  13.             url: 'fs://rotation/2.png'
  14.         }, {
  15.         }, {
  16.             url: 'fs://rotation/4.png'
  17.         }, {
  18.             url: 'fs://rotation/5.png'
  19.         }, {
  20.             url: 'fs://rotation/6.png'
  21.         }],
  22.         styles: {
  23.             bg: '#fff',
  24.             r: 190,
  25.             image: {
  26.                 w: 80,
  27.                 h: 108,
  28.                 corner: 2,
  30.             },
  31.             indicator: {
  32.                 bg: '#eee',
  33.                 active: '#f00'
  34.             }
  35.         },
  36.         index: 1
  37.     },
  38.     function(ret, err) {
  39.         if (ret) {
  40.             alert(JSON.stringify(ret));
  41.         } else {
  42.             alert(JSON.stringify(err));
  43.         }
  44.     });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setIndex

滚动到指定条目

setIndex({params})

params

index：

  • 类型：数字
  • 描述：滚动的指定位置索引
  1. var MNRotationMenu = api.require('MNRotationMenu');
  2. MNRotationMenu.setIndex({
  3.     index: 2
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已经隐藏的模块

show()

示例代码

可用性

iOS系统，Android系统

hide

隐藏模块（并没有从内存清除）

hide()

示例代码

  1. var MNRotationMenu = api.require('MNRotationMenu');
  2. MNRotationMenu.hide();

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭模块（从内存清除）

close()

示例代码

  1. var MNRotationMenu = api.require('MNRotationMenu');

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clearCache

清除缓存到本地的网络图片，本接口只清除本模块缓存的数据，若要清除本app缓存的所有数据这调用api.clearCache

clearCache()

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本