您需要登录后才可以操作登录 | 立即注册
关闭
关闭
AppCan:4种常用的多浮动窗口实现方法
AppCan_小助 | 博文标签: 多浮动窗口 , | 2016/05/17 18:15:56

基于AppCan移动平台开发APP,许多开发者会遇到多浮动窗口实现的问题,这里笔者归纳整理了4种常用多浮动窗口实现方法供开发者参考,可以查看具体API,按项目需求使用。


第一种 appcan.frame.open

appcan.frame.open(id,url,left,top,name,index,change,extraInfo)   打开一个浮动窗口

说明:再次封装appcan.window.openPopover常用参数(简化版)。

url:浮动窗口要加载的页面的地址,如果url是一个数组则打开多页面浮动窗口。

这种方法较为简单,推荐使用。  


应用场景:


1. tab切换,直接在IDE中插入控件,一键创建选项卡。

页面自动加载选项卡代码,bodyscript标签已经把所需代码创建好。

<script src="js/appcan.tab.js"></script>

Script标签已自动加载appcan.tabtabview.on方法,body标签里已自动加载<div id="tabview" class="uf sc-bg ubt sc-border-tab">


2.tab+滑动效果

利用appcan.tab(第1步)+appcan.frame.open方法(详见该方法示例)


模拟器/实时预览效果:有内容,可手动切换窗口

真机效果:有内容,可手动切换窗口,可滑动切换窗口


第二种 使用AppCan原生uexWindow代码


uexWindow.openMultiPopover打开多页面浮动窗口

说明:在当前window打开一个多页面浮动窗口,页面之间滑动切换,设置是否支持滑动参照setMultilPopoverFlippingEnbaled

补充:这种方法使用原生uexWindow代码实现多浮动窗口,而其他3种方法是基于AppCan引擎原生接口封装。

 
第三种appcan.window.openMultiPopover 

appcan.window.openMultiPopover(popName,content,dataType, left, top, width, height,change, fontSize, flag, indexSelected,extraInfo)打开多页面浮动窗口

说明封装uexWindow.openMultiPopover原生接口。


第四种appcan.frame.openMulti

appcan.frame.openMulti(popName,content,dataType, left, top, width, height, fontSize, flag, indexSelected)打开多页面浮动窗口

说明:再次封装appcan.window. openMultiPopover 常用参数(简化版)。

区别:change参数。


Tips


 1.实现多窗口间禁止滑动:


1)在以上4种方式的基础上,调用uexWindow.setMultilPopoverFlippingEnbaled

uexWindow.setMultilPopoverFlippingEnbaled(1); //设置多浮动窗口间禁止滑动,enable参数为1,该接口需要在要禁止滑动的浮动窗口即Multipopover的子页面中调用;


2)还有另一种方法可以实现,推荐参考IDE中模板index.html首页使用的方法。



2. 如果是测试时无法显示content内容,请注意dataType参数:需要传入0,如果为1content为路径,则不显示内容,具体参考dataType参数说明。


窗口载入的数据类型:

0: url方式载入

1: html内容方式载入

2: 既有url方式, 又有html内容方式

3.appcan.window.openMultiPopover 方法中参数dataType 2,如果内容不显示,原因可能是传入的content为路径url方式,默认为传入0即可。


下载case,文档中心有提供。下载链接


以上为AppCan应用开发时常用的4种多浮动窗口实现方法,详细使用说明和相关示例,在文档中心都有相关介绍。希望大家能仔细阅读文档,多多琢磨,许多问题都能迎刃而解。


窗口模块Window :http://newdocx.appcan.cn/newdocx/docx?type=1259_1254

浮动窗口模块Frame:http://newdocx.appcan.cn/newdocx/docx?type=1260_1254



1934 浏览
7 收藏
3
2 评论
上一篇:细说前端布局中position属性和应用实例 | 下一篇:基于AppCan的苹果内支付插件的使用

最近访客

huawuhen2016

2018/06/14

raymond_t

2018/06/13

枫爷

2018/06/10

小城别

2018/04/20

brunce10

2018/04/07

强智科技

2018/03/24

赚钱快

2018/03/19

micnet

2018/02/26

lvhui2018

2018/02/25

yrb

2018/02/08

评论     facelist

您需要登录后才可以评论 登录 | 立即注册

全部评论

cfk007 2016/06/04 17:17

你光说了这几种方法,文档都能找的到。你能详细说一下这几种方法的不同使用方法和打开的窗口有什么不同,在什么情况下用什么方法么?

AppCan演示 2016/06/06 09:32

回复 cfk007:第一种是最常使用的方法,jssdk封装使用方便。第二种是jssdk未进行封装的uexwindow原生接口,纯是基础的appcan原生开放接口,无进行封装,前端交互一般不推荐使用。第三种与第一种都是jssdk封装第二种uexwindow原生接口,区别是接口参数有区别,第四种类推。4种都可以实现多浮动窗口,分享出来按照各自项目需求结合使用接口参数进行使用..