`

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

 

最后,祝好运!

 

分享到:
评论

相关推荐

    网页图片轮换切换网页图片轮换切换

    网页图片轮换是一种常见的网页设计技术,用于在页面上展示多张图片并自动进行定时切换,以创造出动态的视觉效果。这种技术可以用于网站的广告展示、产品展示或者背景图片等场景,使得用户无需手动操作就能看到不同的...

    导航轮换(自动,背景根据轮换,内容轮换。。)

    当导航栏的某个选项被选中或轮换到时,页面的背景图片或颜色也会相应改变,创造出一致且动态的用户体验。这通常通过CSS3的`background-image`或`background-color`属性配合JavaScript实现。 3. **内容轮换**: ...

    超级Marquee,可做图片导航,图片轮换

    【正文】 在IT行业中,网页元素的动态效果是提升用户体验的重要手段之一,"超级Marquee"就是这样...通过巧妙地运用CSS和JavaScript,开发者可以创建出既有吸引力又易于使用的图片导航和轮换效果,提升网站的整体体验。

    jQuery-图片轮换

    在网页设计中,图片轮换是一种常见的视觉效果,用于展示多张图片并自动切换,以吸引用户注意力。jQuery,作为一款强大的JavaScript库,为实现这一功能提供了丰富的API和插件支持。本文将深入探讨如何使用jQuery实现...

    图片切换导航 4张图片轮换切换 有实例!

    本文将详细讲解如何实现一个4张图片轮换切换的导航,适用于各种Web项目。 首先,我们需要理解这个功能的核心原理:通过定时器(如JavaScript的setInterval)来定期更改显示的图片,并配合CSS动画实现平滑过渡效果。...

    jquery实现的各种图片自动轮换效果

    2. 图片轮换:也称为图片幻灯片,是网页上一组图片按照特定顺序自动切换显示,通常配合过渡效果和导航控制,以实现动态展示。 二、jQuery图片轮换实现原理 1. 动态修改CSS属性:利用jQuery的`.css()`方法,可以...

    html中图片轮换

    通常,我们会把所有图片放在一个`<div>`元素中,并设置它们的初始状态为隐藏,以便后续通过JavaScript进行控制。例如: ```html <!-- 更多图片... --> ``` CSS则是负责样式和布局的部分。我们可以设定图片...

    jquery 图片轮换插件

    1. **初始化设置**:插件在页面加载完成后自动运行,首先获取所有待轮换的图片元素,并根据用户设定的参数进行配置,如切换间隔时间、过渡效果等。 2. **隐藏多余图片**:除第一张图片外,其他图片在初始状态下会被...

    图片轮换 广告轮换,防CSDN

    1. 图片轮换:图片轮换,又称幻灯片效果或滑动展示,是一种在网络页面上展示多张图片的方式,通过定时切换或者用户触发事件来呈现不同的图片。这种技术常用于首页焦点图、产品展示、新闻更新等场景,能够有效利用...

    图片轮换js代码焦点图图片切换,图片js代码

    在网页设计中,图片轮换效果常常用于展示一组图片,以吸引用户注意力并提供动态的视觉体验。这种效果通常被称为焦点图,它能够自动或手动切换显示不同的图片,提升用户体验。本文将深入探讨如何利用JavaScript(简称...

    仿flash效果CSS图片轮换

    在网页设计中,为了吸引用户的注意力并展示多样化的信息,图片轮换效果是一个常见的功能。传统的实现方式是使用Adobe Flash技术,但随着HTML5和CSS3的发展,现在我们可以使用纯CSS来实现类似的效果,无需依赖Flash...

    Javascript开发实例:仿FLASH的图片轮换播放器

    在JavaScript开发领域,创建一个仿FLASH的图片轮换播放器是一项常见的挑战,它涉及到动态内容展示、用户交互和视觉效果的实现。这个实例是利用JavaScript的灵活性和强大的DOM操作能力,来模拟曾经广泛使用的FLASH...

    四屏flash图片轮换代码.zip_四屏flash图片轮换代码

    【标题】:“四屏flash图片轮换代码.zip_四屏flash图片轮换代码”这个压缩包文件主要包含了一个实现四屏展示的Flash图片轮播效果的代码资源。四屏指的是在网页设计中,同时在四个独立区域显示不同图片的布局方式,这...

    好看的JS图片轮换2011

    1. **图片轮换**:这是一种常见的网页设计技术,用于在页面上展示一组图片,并以自动或用户触发的方式进行切换。这种效果能提高用户体验,使网站更具吸引力。 2. **JavaScript(JS)**:JS是网页开发中的主要脚本...

    很好的图片轮换效果有JS

    "很好的图片轮换效果有JS" 这个标题表明我们将探讨的是使用JavaScript实现的图片轮换特效。JavaScript是一种广泛使用的客户端脚本语言,它能够使网页具有交互性,而图片轮换正是这种交互性的体现。 图片轮换效果...

    jquery图片轮换插件(使用超级简单,效果好)

    4. **初始化插件**:在文档加载完成后,使用jQuery选择器找到图片容器,并调用插件方法进行初始化,例如`$('.imageContainer').imageChange();` 5. **配置参数**:如果需要,可以传入配置对象来定制插件行为,例如`$...

    js图片轮换特效

    6. 停止/恢复轮换:根据需求,可能还需要添加停止和恢复轮换的函数。这可以通过清除定时器实现。 ```javascript function stopRotation() { clearTimeout(imageTimer); } function resumeRotation() { ...

    js实现图片轮换

    以下将详细介绍如何使用JavaScript来创建一个图片轮换的效果,并提供相关的知识点。 首先,我们需要了解基本的HTML结构,用于展示图片轮换。通常,我们会创建一个包含多张图片的`<div>`元素,每张图片都是`<img>`...

    图片轮换带swf

    标题“图片轮换带swf”指的是一个...不过,随着HTML5和移动设备的普及,Flash已经逐渐被淘汰,现在的图片轮换更倾向于使用HTML、CSS和纯JavaScript(或者框架如Vue、React等)来实现,以确保更好的跨平台兼容性和性能。

    ASP读取数据库图片轮换

    在本场景中,"ASP读取数据库图片轮换"是一个功能,它涉及到使用ASP技术从数据库中读取图片,并在网页上实现动态的图片轮换效果,类似于幻灯片展示。这种效果通常会使用到JavaScript或者Flash技术来增强用户体验,...

Global site tag (gtag.js) - Google Analytics