APICloud 图片轮播模块 UIScrollPicture

原创 2015年11月20日 09:16:49

最近接触了APICloud,摸索着学习中,欢迎交流。

  • UIScrollPicture 是一个图片轮播模块,只需传入一组图片地址,即可实现图片轮播效果,开发者可以监听滑动或点击事件;一般用于头条新闻或广告图片的轮播展示;图片地址支持本地路径或网络路径,网络图片会自动缓存到本地。来自APICloud官网文档。
  • 实现步骤

    • 将图片轮播模块代码添加到apiready中
      • apiready = function(){
        var obj = api.require('UIScrollPicture');
        var paths = ['widget://image/1.png', 'widget://image/2.png'];
        var captions = ['title1', 'title2', 'title3', 'title4', 'title5'];
        obj.open({
        rect: {
        x: 0,
        y: 60,
        w: api.winWidth,
        h: 200
        },
        data: {
        paths: paths,
        captions: captions
        },
        styles: {
        caption: {
        height: 35,
        color: '#E0FFFF',
        size: 13,
        bgColor: '#696969',
        position: 'bottom'
        },
        indicator: {
        align: 'center',
        color: '#FFFFFF',
        activeColor: '#DA70D6'
        }
        },
        placeholderImg: 'widget://image/3.png',
        contentMode: 'scaleToFill',
        interval: 3,
        loop: true,
        fixedOn: '',
        fixed: false
        }, function(ret, err){
        if(ret.status){
        if(ret.eventType == 'click'){
        //点击图片的操作
        alert('咦?')
        }
        }
        });
      • 文档中说明很清楚,记住widget://就是打包的目录,比如你的项目叫做网易新闻,widget://image/1.png就代表下图中image中的1.png。 如图
    • 在本地用Apploader测试或者一键同步测试后,打包名称widget.zip,上传代码。
    • 重要的一步:添加模块,之前我没有添加模块,在本地测试成功,但是打包就不行。

      • 这里写图片描述
        搜索模块

      • 添加模块这里写图片描述

  • 云编译即可
版权声明:本文为博主原创文章,未经博主允许不得转载。

APICloud 如何实现将UIScrollPicture 模块添加到指定元素里面

先注意以下几点: 1、 UIScrollPicture 模块是 scrollPicture 模块的优化版。 2、不能同时添加的模块:fog2 使用APICloud做APP的小哥哥小姐姐们...
  • LLDD2014425
  • LLDD2014425
  • 2017年11月24日 14:09
  • 172

5种方式轮播图

  • 2016年02月29日 10:48
  • 170KB
  • 下载

使用 aui 自带的图片轮播图,AJAX异步调用数据给它无法轮播问题

http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=57427 就是先加载数据再轮播
  • xiaoxiaohui520134
  • xiaoxiaohui520134
  • 2017年07月03日 10:37
  • 635

淘宝全屏图片轮播代码

  • 2013年10月13日 00:31
  • 24KB
  • 下载

AUI 滚动视图使用

1、滚动视图类似手机上的scroll1.1 引入aui样式: 1.2 需要自己设置图片的样式 如下: .aui-slid...
  • lhb_11
  • lhb_11
  • 2017年04月18日 14:59
  • 1061

如何评价 APICloud ?

柚子科技的APICloud限量公测上线,我觉得这个端 + 云的概念挺好,不知道大家怎么看?...
  • u014608640
  • u014608640
  • 2016年04月05日 16:42
  • 4986

MUI-图片轮播控件

图片轮播继承自slide插件,因此其DOM结构、事件均和slide插件相同; 在MUI框架中针对图片的轮播做了一个简单的封装。 DOM结构 默认不支持循环播放,DOM结构如下: ...
  • u013059555
  • u013059555
  • 2015年10月26日 13:42
  • 19367

APICloud 图片轮播模块 UIScrollPicture

最近接触了APICloud,摸索着学习中,欢迎交流。 UIScrollPicture 是一个图片轮播模块,只需传入一组图片地址,即可实现图片轮播效果,开发者可以监听滑动或点击事件;一般用于头条新闻或广...
  • songzige
  • songzige
  • 2015年11月20日 09:16
  • 3474

使用apicloud实现注册功能和短信验证功能

一、建立注册页面1.首先打开APICloudStudio,新建apicloud项目,选择空百应用。 2.然后写注册页面,截图如下:二、加载短信模块和使用短信验证码功能var isinerval, t...
  • qq_33824364
  • qq_33824364
  • 2016年07月24日 23:30
  • 146

APICloud模块的引入、服务器数据对接,APP数据存储方式

 1.模块的使用和引用 在apicloud的模块store里面提供了大量的模块,我们可以直接在html里面引入使用 使用方法:在需要使用模块的页面中加入: var obj = ap...
  • qianmodanshang
  • qianmodanshang
  • 2016年07月03日 09:34
  • 4338
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:APICloud 图片轮播模块 UIScrollPicture
举报原因:
原因补充:

(最多只允许输入30个字)