APICloud（八）：解决使用UIScrollPicture进行图片轮换导航栏被覆盖的问题

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

 

最后，祝好运！