APP开发平台 > Blog > UIScrollPicture 模块(图片轮播)demo示例

UIScrollPicture 模块(图片轮播)demo示例

  UIScrollPicture 模块是一个图片轮播模块,只需传入一组图片地址,即可实现图片轮播效果。同时本Demo还演示了如何使用UIScrollPicture实现APP引导页功能。

  本文为APICloud官方轮播图模块UIScrollPicture的演示DEMO,主要演示了APICloud官方模块UIScrollPicture的使用场景和方法。

  注意:使用模块前需在控制台添加UIScrollPicture模块和UIButton模块。

  使用UIScrollPicture创建引导页

  方法1:点击引导页最后一个页面任意位置,进入主页面

  方法2:在引导页最后一个页面添加UIButton,通过点击UIButton按钮进入主页面

  页面逻辑写在index.html中,使用UIScrollPicture创建轮播图


index.html

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title>APICloudModuleDemo</title>

    <link rel="stylesheet" type="text/css" href="./css/api.css" />

    <style type="text/css">

    </style>

</head>

<body>

</body>

<script type="text/javascript" src="./script/api.js"></script>

<script type="text/javascript">

    var UIScrollPicture;   //轮播图模块对象

    var UIButton;          //按钮模块对象

    var vButtonId;         //按钮模块对象索引对象

    //程序启动入口

    apiready = function(){

      //引导页显示判断

      var isFirst = api.getPrefs({

          key: 'isFirst',

          sync: true,

      });

      // isFirst=false;

      if (!isFirst) {

          //启动引导页面

          fnStartGuidePage();

      } else {

          fnStartMainPage();

      }

    };

    function fnStartGuidePage() {

        //设置页面默认图片;

        var tData = [

            'widget://res/guide1.jpg',

            'widget://res/guide2.jpg',

            'widget://res/guide3.jpg',

        ];

        UIScrollPicture = api.require('UIScrollPicture');

        UIScrollPicture.open({

            rect: {

                x: 0,

                y: 0,

                w: 'auto',

                h: 'auto'          //此处用'auto'是为了适应某些机型页面底部虚拟键的显示/隐藏 切换

            },

            data: {

                paths: tData,

            },

            styles: {

                indicator: {

                    align: 'center',

                    color: 'rgba(255,255,255,0.4)',

                    activeColor: '#FFFFFF'

                }

            },

            contentMode: 'scaleToFill',

            auto: false,          //禁止自动滚动

            loop: false,          //禁止循环播放

        }, function(ret, err) {

            if (ret) {

              /*

                //方法1  点击末页任意位置进入主页面

                if('click' == ret.eventType){

                   if(ret.index==3){

                     //关闭页面,进入主页面

                     fnStartMainPage();

                   }

                }

              */

                //方法2  点击末页按钮进入主页面(使用前,需在控制台添加UIButton模块)

                //设计思路:添加一个UIButton模块,在UIScrollPicture页面滑动到末页时显示UIButton模块,其余页面隐藏按钮模块,在按钮模块添加点事件点击模块进入主页面

                //添加末页点击进入主页面方法

                if ('show' == ret.eventType) {

                    UIScrollPicture.addEventListener({

                        name: 'scroll'

                    }, function(ret, err) {

                        if (ret.status) {

                            if (ret.index == (tData.length - 1)) {

                                //显示进入按钮

                                fnShowStartBtn();

                            } else {

                                //隐藏进入按钮

                                fnHideStartBtn();

                            }

                        }

                    });

                }

            }

        });

    }

    //启动程序主页面

    function fnStartMainPage() {

        if(UIScrollPicture){

          //缓存App启动信息

          api.setPrefs({

              key: 'isFirst',

              value: '1'

          });

          //关闭引导页模块

          UIScrollPicture.close();

          //关闭方法2使用按钮模块

          if(UIButton){

            UIButton.close({

                id: vButtonId

            });

          }

        }

        //启动主页面

        api.openWin({

            name: 'main',

            url: 'html/main.html',

            bounces: false,

            vScrollBarEnabled: false,

            hScrollBarEnabled: false,

            slidBackEnabled: false,

            rect: {

                x: 0,

                y: 0,

                w: 'auto',

                h: 'auto'

            }

        });

    }

    //显示进入APP按钮

    function fnShowStartBtn() {

        if (!vButtonId && vButtonId != 0) {

            //初始化按钮模块

            UIButton = api.require('UIButton');

            UIButton.open({

                rect: {

                    x: api.winWidth / 2 - 50,

                    y: api.winHeight - 60,

                    w: 100,

                    h: 30

                },

                corner: 5,

                bg: {

                    normal: 'rgba(255,255,255,50)',

                    highlight: 'rgba(255,255,255,90)',

                    active: 'rgba(255,255,255,90)'

                },

                title: {

                    size: 20,

                    normal: '立即开启',

                    highlightColor: '#000000',

                    activeColor: '#000adf',

                    normalColor: '#FFFFFF',

                    alignment: 'center'

                },

                fixed: true,

                move: false

            }, function(ret, err) {

                if ('show' == ret.eventType) {

                    vButtonId = ret.id;

                }

                if ('click' == ret.eventType) {

                    //关闭引导页,进入主页面

                    fnStartMainPage();

                }

            });

        } else {

            //模块已初始化过,直接显示

            UIButton.show({

                id: vButtonId

            });

        }

    }

    //隐藏进入按钮

    function fnHideStartBtn() {

        if (UIButton) {

            UIButton.hide({

                id: vButtonId

            });

        }

    }

</script>

</html>

复制代码

    

    更多资讯,请关注:www.apicloud.com

  提交App定制需求,了解报价和周期:https://app.apicloud.com/index?uzchannel=500


2018-05-07 来源:APICloud

An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements