大部分网站或者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之间显示,很不协调。目前还没有想到解决的办法,哪位同僚要是有好的办法,请务必留言告知,不胜感激!
最后,祝好运!