apicloud apicloud

注册
查看: 5106|回复: 19

[模块教程] UIScrollPicture 模块(图片轮播)demo分享

实习司机

UID:253705

主题:
53
帖子:
175
云币:
545

[模块教程] UIScrollPicture 模块(图片轮播)demo分享

5106 19 | 发表于 2018-10-13 19:15:33 |阅读模式 | |
UIScrollPicture 是一个图片轮播模块。具有缓存功能,极低内存占用。可展示本地、网络图片。支持手势滑动、自动播放。详见模块文档:
https://docs.apicloud.com/Client-API/UI-Layout/UIScrollPicture


下面展示一下模块效果:
模块开放了颜色,字体大小,指示器大小等很多自定义参数,因此有很高的自由定义度。


下面是代码:
附件有widget代码包。
  1. <!doctype html>
  2. <html>

  3. <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.         <meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
  7.         <style type="text/css">
  8.                 html {
  9.                         background-color: white;
  10.                 }

  11.                 html,
  12.                 body {
  13.                         height: 1000px;
  14.                 }

  15.                 header {
  16.                         border-bottom: 1px solid #ccc;
  17.                         padding: 25px 0;
  18.                         margin-top: 350px;
  19.                 }

  20.                 span {
  21.                         padding: 5px 15px;
  22.                         margin: 10px;
  23.                         display: inline-block;
  24.                         background-color: #e8e8e8;
  25.                 }
  26.         </style>
  27. </head>

  28. <body>
  29.         <header>
  30.                 <h1>UIScrollPicture</h1>
  31.                 <mark>
  32.                         使用前请详细阅读 文档 使用规则
  33.                 </mark>
  34.         </header>
  35.         <span tapmode onclick="fnOpen()">open()</span>
  36.         <span tapmode onclick="fnClose()">close()</span>
  37.         <span tapmode onclick="fnShow()">show()</span>
  38.         <span tapmode onclick="fnHide()">hide()</span>
  39.         <span tapmode onclick="fnSetCurrentIndex()">setCurrentIndex()</span>
  40.         <span tapmode onclick="fnReloadData()">reloadData()</span>
  41.         <span tapmode onclick="fnAdEventListener()">addEventListener()</span>
  42. </body>
  43. <script type="text/javascript">
  44.         var UIScrollPicture;
  45.         apiready = function () {
  46.                 UIScrollPicture = api.require('UIScrollPicture');
  47.         };

  48.         function fnOpen() {
  49.                 UIScrollPicture.open({
  50.                         rect: {
  51.                                 x: 0,
  52.                                 y: 0,
  53.                                 w: api.winWidth,
  54.                                 h: 300
  55.                         },
  56.                         data: {
  57.                                 paths: ['widget://res/1.jpg', 'widget://res/2.jpg', 'widget://res/3.jpg'],  //数组类型;图片路径数组,支持http://,https://,widget://,fs://协议
  58.                                 captions: ['竹', '屋', '花']
  59.                         },
  60.                         styles: {
  61.                                 caption: {
  62.                                         height: 35,
  63.                                         color: '#E0FFFF',
  64.                                         size: 13,
  65.                                         bgColor: '#696969',
  66.                                         position: 'bottom'
  67.                                 },
  68.                                 indicator: {
  69.                                         dot: {                         // (可选项)JSON对象;指示器小圆点样式;不传则使用系统默认小圆点样式
  70.                                                 w: 10,  //(必选项)数字类型;小圆点宽度
  71.                                                 h: 10, //(必选项)数字类型;小圆点高度
  72.                                                 r: 5,  //(必选项)数字类型;corner 页面控制器指示标记(矩形)的圆角大小
  73.                                                 margin: 20  //(必选项)数字类型;小圆点间距
  74.                                         },
  75.                                         align: 'center',
  76.                                         color: '#FFFFFF',
  77.                                         activeColor: '#DA70D6'
  78.                                 }
  79.                         },
  80.                         placeholderImg: 'widget://res/slide1.jpg',
  81.                         contentMode: 'scaleToFill',
  82.                         interval: 3,
  83.                         loop: true,
  84.                         fixedOn: '',
  85.                         fixed: false
  86.                 }, function (ret, err) {
  87.                         if (ret) {
  88.                                 alert(JSON.stringify(ret));
  89.                         } else {
  90.                                 alert(JSON.stringify(err));
  91.                         }
  92.                 });
  93.         };
  94.         function fnClose() {
  95.                 UIScrollPicture.close();
  96.         };
  97.         function fnShow() {
  98.                 UIScrollPicture.show();
  99.         };
  100.         function fnHide() {
  101.                 UIScrollPicture.hide();
  102.         };
  103.         function fnSetCurrentIndex() {
  104.                 UIScrollPicture.setCurrentIndex({
  105.                         index: 2
  106.                 });
  107.         };
  108.         function fnReloadData() {
  109.                 UIScrollPicture.reloadData({
  110.                         data: {
  111.                                 paths: ['widget://res/4.jpg', 'widget://res/5.jpg', 'widget://res/6.jpg'],
  112.                                 captions: ['title1', 'title2', 'title3']
  113.                         }
  114.                 });
  115.         };

  116.         function fnAdEventListener() {
  117.                 UIScrollPicture.addEventListener({
  118.                         name: 'scroll'
  119.                 }, function (ret, err) {
  120.                         if (ret) {
  121.                                 alert(JSON.stringify(ret));
  122.                         } else {
  123.                                 alert(JSON.stringify(err));
  124.                         }
  125.                 });
  126.         };
  127. </script>

  128. </html>
复制代码

友情链接:
其他分享帖:https://community.apicloud.com/bbs/thread-112221-1-1.html


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

驾校小白

UID:661947

主题:
1
帖子:
9
云币:
10
发表于 2019-1-3 15:13:30 |
在主页打开framegroup组,在frame里加载这个为什么不显示在frame里,而是显示在window里,frame遮住了,加上fixed和fixedOn还是不会跟随frame动,只是显示在最上面,切换frame也不隐藏,请问怎样设置才能跟随frame

主题:
12
帖子:
45
云币:
91
发表于 2018-10-29 11:24:45 |
IOS12不兼容啊,图片出不来。

主题:
0
帖子:
4
云币:
6
发表于 2018-10-30 20:54:41 |
好东西,谢谢分享

实习司机

UID:716399

主题:
43
帖子:
130
云币:
218
发表于 2018-10-22 19:13:07 |
请问下这个图片圆角咋设置

老司机

UID:673413

主题:
175
帖子:
12674
云币:
5646

圣诞节

发表于 2018-10-29 16:47:03 |
不能设置圆角吧

主题:
1
帖子:
6
云币:
8
发表于 2018-12-21 05:39:07 |
版主 想请教一下  图片设置圆角有办法吗?

驾校小白

UID:661947

主题:
1
帖子:
9
云币:
10
发表于 2019-1-2 17:50:27 |

驾校小白

UID:661947

主题:
1
帖子:
9
云币:
10
发表于 2019-1-2 17:50:48 |
怎么应用在frame当中啊

主题:
5
帖子:
26
云币:
70
发表于 2019-2-22 09:38:20 |
可以加跳转链接吗?
12下一页
您需要登录后才可以回帖 登录 | 立即注册

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