MNRotationMenu 模块demo 分享

yxWin

MNRotationMenu

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

官方文档                https://docs.apicloud.com/Client-API/Nav-Menu/MNRotationMenu

主要方法
                open：打开图片旋转轮播控件     setIndex：滚动到指定条目        show：显示已经隐藏的模块      
               hide：隐藏模块（并没有从内存清除）       close :关闭模块        clearCache：清除缓存到本地的网络图片
               注意：clearCache 方法只清除块缓存的数据，若要清除本app缓存的所有数据这调用api.clearCache
运行截图


                                                
主要说一下根据条目跳转到指定的图片，首先用正则判断正整数，然后判断输入的条目是否在范围内，这里范围指的是图片数据的数组长度，代码如下。

    //先定义一个图片数据的数组，也可以ajax动态获取图片数据，然后items.push(data)

    var items = [{
        url: 'widget://image/t1.jpg'
    }, {
        url: 'widget://image/t2.jpg'
    }, {
        url: 'widget://image/t1.jpg'
    }, {
        url: 'widget://image/t2.jpg'
    }, {
        url: 'widget://image/t1.jpg'
    }, {
        url: 'widget://image/t2.jpg'
    }, {
        url: 'widget://image/t1.jpg'
    }, {
        url: 'widget://image/t2.jpg'
    }];
    apiready = function() {
    };
    //打开
    function openM(){
      var MNRotationMenu = api.require('MNRotationMenu');
      MNRotationMenu.open({
            rect: {
                x: 0,
                y: 60,
                w: api.winWidth,
                h: 250
            },
            items: items,
            styles: {
                bg: '#ddd',
                r: 250,
                image: {
                    w: 150,
                    h: 250,
                    corner: 5,
                    placeholder: 'widget://placeholder.png'
                },
                indicator: {
                    bg: '#eee',
                    active: '#f00'
                }
            }
          },
          function(ret, err) {
              if (ret) {
                index = ret.index;
                alert('第' + (ret.index+1) + '张' );
              } else {
                alert(JSON.stringify(err));
              }
          });
    }
    //滑动到指定的index
    function setIndex(){
      var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
      var contIndex = $api.byId('index').value;
      if (!re.test(contIndex)) {
      　　　　alert("请输入正确的数字");
      　　　　$api.byId('index').value = '';
      　　　　return false;
      }else{
        if (contIndex > items.length) {
          alert('超出范围,共'+items.length+'张');
          $api.byId('index').value = '';
        } else {
          var MNRotationMenu = api.require('MNRotationMenu');
          MNRotationMenu.setIndex({
              index: contIndex - 1
          });
          $api.byId('index').value = '';
        }
      }
    }
    //显示
    function show(){
      var MNRotationMenu = api.require('MNRotationMenu');
      MNRotationMenu.show();
    }
    //隐藏
    function hide(){
      var MNRotationMenu = api.require('MNRotationMenu');
      MNRotationMenu.hide();
    }
    //关闭
    function clos(){
      var MNRotationMenu = api.require('MNRotationMenu');
      MNRotationMenu.close();
    }
    //清除缓存
    function clearCache(){
      var MNRotationMenu = api.require('MNRotationMenu');
      MNRotationMenu.clearCache();
      alert('ok')
    }

一个简单的MNRotationMenu 模块demo就完成了，源码如下


如有bug请指出，感谢。

Mr.ZhouHeng

还不错