UIScrollPicture 模块(图片轮播)demo示例

YonBIP社区

UIScrollPicture 模块是一个图片轮播模块，只需传入一组图片地址，即可实现图片轮播效果。同时本Demo还演示了如何使用UIScrollPicture实现APP引导页功能

APICloud官方轮播图模块UIScrollPicture的演示DEMO

本DEMO主要演示了APICloud官方模块UIScrollPicture的使用场景和方法。

注意：使用模块前需在控制台添加UIScrollPicture模块和UIButton模块。

使用UIScrollPicture创建引导页

方法1:点击引导页最后一个页面任意位置，进入主页面
方法2:在引导页最后一个页面添加UIButton,通过点击UIButton按钮进入主页面
页面逻辑写在在index.html中

使用UIScrollPicture创建轮播图

完整源码与图片资源请进入链接下载：https://**.**/IT-SDJ/APICloudModuleDemo-UIScrollPicture

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>APICloudModuleDemo</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<style type="text/css">
</style>
</head>
<body>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
var UIScrollPicture; //轮播图模块对象
var UIButton; //按钮模块对象
var vButtonId; //按钮模块对象索引对象
//程序启动入口
apiready = function(){
//引导页显示判断
var isFirst = api.getPrefs({
key: 'isFirst',
sync: true,
});
// isFirst=false;
if (!isFirst) {
//启动引导页面
fnStartGuidePage();
} else {
fnStartMainPage();
}
};
function fnStartGuidePage() {
//设置页面默认图片;
var tData = [
'widget://res/guide1.jpg',
'widget://res/guide2.jpg',
'widget://res/guide3.jpg',
];
UIScrollPicture = api.require('UIScrollPicture');
UIScrollPicture.open({
rect: {
x: 0,
y: 0,
w: 'auto',
h: 'auto' //此处用'auto'是为了适应某些机型页面底部虚拟键的显示／隐藏切换
},
data: {
paths: tData,
},
styles: {
indicator: {
align: 'center',
color: 'rgba(255,255,255,0.4)',
activeColor: '#FFFFFF'
}
},
contentMode: 'scaleToFill',
auto: false, //禁止自动滚动
loop: false, //禁止循环播放
}, function(ret, err) {
if (ret) {
/*
//方法1 点击末页任意位置进入主页面
if('click' == ret.eventType){
if(ret.index==3){
//关闭页面，进入主页面
fnStartMainPage();
}
}
*/
//方法2 点击末页按钮进入主页面（使用前，需在控制台添加UIButton模块）
//设计思路：添加一个UIButton模块，在UIScrollPicture页面滑动到末页时显示UIButton模块，其余页面隐藏按钮模块，在按钮模块添加点事件点击模块进入主页面
//添加末页点击进入主页面方法
if ('show' == ret.eventType) {
UIScrollPicture.addEventListener({
name: 'scroll'
}, function(ret, err) {
if (ret.status) {
if (ret.index == (tData.length - 1)) {
//显示进入按钮
fnShowStartBtn();
} else {
//隐藏进入按钮
fnHideStartBtn();
}
}
});
}
}
});
}
//启动程序主页面
function fnStartMainPage() {
if(UIScrollPicture){
//缓存App启动信息
api.setPrefs({
key: 'isFirst',
value: '1'
});
//关闭引导页模块
UIScrollPicture.close();
//关闭方法2使用按钮模块
if(UIButton){
UIButton.close({
id: vButtonId
});
}
}
//启动主页面
api.openWin({
name: 'main',
url: 'html/main.html',
bounces: false,
vScrollBarEnabled: false,
hScrollBarEnabled: false,
slidBackEnabled: false,
rect: {
x: 0,
y: 0,
w: 'auto',
h: 'auto'
}
});
}
//显示进入APP按钮
function fnShowStartBtn() {
if (!vButtonId && vButtonId != 0) {
//初始化按钮模块
UIButton = api.require('UIButton');
UIButton.open({
rect: {
x: api.winWidth / 2 - 50,
y: api.winHeight - 60,
w: 100,
h: 30
},
corner: 5,
bg: {
normal: 'rgba(255,255,255,50)',
highlight: 'rgba(255,255,255,90)',
active: 'rgba(255,255,255,90)'
},
title: {
size: 20,
normal: '立即开启',
highlightColor: '#000000',
activeColor: '#000adf',
normalColor: '#FFFFFF',
alignment: 'center'
},
fixed: true,
move: false
}, function(ret, err) {
if ('show' == ret.eventType) {
vButtonId = ret.id;
}
if ('click' == ret.eventType) {
//关闭引导页，进入主页面
fnStartMainPage();
}
});
} else {
//模块已初始化过，直接显示
UIButton.show({
id: vButtonId
});
}
}
//隐藏进入按钮
function fnHideStartBtn() {
if (UIButton) {
UIButton.hide({
id: vButtonId
});
}
}
</script>
</html>

复制代码

huanyun-c

回帖拿金币，支持支持

hbshow

感谢分享，学习中

sd9999

感谢分享，学习了！！！

kangjun

回帖拿金币，支持支持

神奇的一颗蛋

帖拿金币，支持支持

顽皮的大叔

学习中。。。。

黄维荣

捡个云币

tanjingwaini

回帖拿金币，支持支持

喵小猫

帖拿金币，支持支持

UIScrollPicture 模块(图片轮播)demo示例

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币

回帖奖励 +1 Y币