大部分网站或者APP banner处都会放置几张图片进行轮播，很多插件也都有这个效果，APICloud提供的UIScrollPicture模块就可以轻松实现图片录播的效果。
1、先从模块库中找到UIScrollPicture并添加到app中；
2、在代码中使用UIScrollPicture：
var UIScrollPicture = api.require('UIScrollPicture');
UIScrollPicture.open({
rect: {
x: 0,
y: 80,
w: api.winWidth,
h: 185.6
},
data: {
paths: [
'widget://images/1.png',
'widget://images/2.jpg',
'widget://images/3.jpg'
]
},
styles: {
caption: {
height: 35,
color: '#E0FFFF',
size: 13,
bgColor: '#696969',
position: 'bottom'
},
indicator: {
align: 'center',
color: '#FFFFFF',
activeColor: '#DA70D6',
}
},
contentMode: 'scaleToFill',
interval: 3,
loop: true,
fixedOn: api.frameName,
fixed: false
}, function(ret, err) {
if (ret) {
//alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
以上例子是我的项目中用到的，这里也不多说各个参数的用法，想了解的可以去官网上看。
我这里说一下这个控件存在的一个问题。
上面说过，这个图片轮播的效果是放在banner的位置，而banner上面有个导航栏，并且这个导航栏像“冻结的窗口一样冻结了，不随着滚动条的滚动而滚动”，它永远显示在最顶端（即position=fixed）。
当页面上不添加这个控件时，滚动条如何滚动导航栏都不会变化。若是加入了这个控件，当banner的图片滚动到导航栏的时候，导航栏消失了等图片滚过去了，导航栏又出现了。而banner下边的内容继续滚动，导航栏依旧不会变化。
看这个效果有点像：banner把导航栏挡住了，用css的效果来说就是banner的z-index比导航栏的要大，所以banner显示在上面，能够遮住导航栏。
根据这个思路去解决，将导航栏所在div的z-index调大（测试时调到了10000），问题依旧存在。
然后修改了导航栏的position改成relative，问题倒是解决了，可是导航栏也不固定在最顶端，而是随着滚动条滚的看不见了，这不符合要求。
查看APICloud官网的说明文档，发现fixed好像跟这个有关系，这个属性官网的说明如下：
fixed：模块是否随所属 window 或 frame 滚动，默认值：true（不随之滚动）
最开始测试时故意将fixed改成了false，结果不符合要求，修改成true之后，banner不滚动了，导航栏也冻住了，，也就是导航栏和banner都不动了只有页面内容滚动。虽说这个效果比上面的效果好，但是看起来太变扭了，还是不符合要求。
最后想来想去，想到了一个方法：导航栏和banner是处于同一个页面的，但是banner效果好像在导航栏的上层且不能修改它们的层级关系，我要是在当前重新开一个frame它是不是就可以浮到banner的上面而不再受banner的影响了呢。
想到之后就测试了一下，以下为测试代码：
api.openFrame({
name: 'header_frame',
url: 'public/header.html',
rect: {
x:0,
y:0,
w:api.winWidth,
h:80
}
});
如此之后，果然不受影响了，且符合要求。
原本以为这个问题算是完美的解决了，今天为页面添加了下拉刷新功能之后，别的页面的刷新动画都是在页面的最顶端显示，这个页面的动画却是在导航栏和banner之间显示，很不协调。目前还没有想到解决的办法，哪位同僚要是有好的办法，请务必留言告知，不胜感激！
最后，祝好运！