跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路1.问题描述:在实现图片轮转时,若将mui(“#slider”).slider({interval:5000});置于图片加载之前,图片不会显示,解决措施:将其置于图片显示之后才会显示。2.问题描述:同上面的问题,会遇到报指针为null的异常。若要获取一个组件的id,可能带获取的组件还未加载,导致获取失败。解决措施:将获取组件id的js脚本

大家好,又见面了,我是你们的朋友全栈君。

注:请点击此处进行充电!​

1.问题描述在实现图片轮转时,若将

<script type="text/javascript">

mui("#slider").slider({

interval: 5000

});

</script>

置于图片加载之前,图片不会显示,

解决措施:将其置于图片显示之后才会显示。

2.问题描述: 跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

同上面的问题,会遇到报指针为null的异常。若要获取一个组件的id,可能带获取的组件还未加载,导致获取失败。

解决措施:将获取组件id的js脚本在定义组件id之后完成。

3.问题描述:页面是由主页面加内容页面组合而成。在主页面做弹出菜单时,弹出菜单无法显示。

问题根源:内容页面遮挡了弹出菜单,致其无法显示。

解决措施:弹出层放在内容页面里,父页面通知内容页面来显示。(使用遮罩蒙版技术解决)

注:在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除popover控件外的其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方的逻辑,而会关闭popover同时关闭蒙版;再比如侧滑菜单界面,菜单划出后,除侧滑菜单之外的其它区域都会遮罩一层蒙版,用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

这是一个跨webview的popover示例,在父webview中,点击后通过自定义事件通知子webview,子webview再执行popover的显示隐藏逻辑;

思想来源于Hbuilder群,启发了自己。通过HBuilder自带的示例可以很好的解决自己遇到的问题。

折腾了将近一天这个问题还是没能得到解决!弹出菜单还是被内容页面遮挡。如图一所示,其实自己是想实现图二:

疑惑:父页面如何与内容页面传递数据?

  跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

图一

跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

                 图二

4.问题描述:一个view有诸多button,可不可以通过一个函数判断点击的是哪一个button?并获取其id

解决措施

//on中参数的含义依次为事件、选择器、参数、方法,其中选择器与参数为可选项

mui(‘.mui-content’).on(‘tap’,‘body’,function(){

   alert(this.id);// (根据id判断是哪一个button)

})

总结:mui中的方法都是封装的jquery,所以自己还得从jquery着手,因为好多方法不会用,不知道参数的含义。

 

5.问题描述:由于index页面的顶部导航栏与分类页面的头顶部导航栏相同,header和content在不同的webview中。我想提升代码的复用性(即多个content页面均使用同一个header页面),如何解决?Mui能够做到吗?

解决措施:使用webview模式选项卡。何谓webview模式?其实就是每个选项卡内容都是一个独立的webview,彼此之间互相独立、互不影响; 对于较为复杂的业务系统,推荐使用该模式。另外,基于webview模式的选项卡,支持原生加速的下拉刷新。如下图:

 跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

感触:其实很多问题都可以从Hello mui demo 中得到答案。自己要经常操作以求更加熟悉。

6.问题描述:见下

跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

解决措施:见上。

由此转入Angular框架 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/138266.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • springboot到底是什么_Springboot注解

    springboot到底是什么_Springboot注解SpringBoot是干哈的介绍:springboot是由Pivotal团队提供的全新框架。spring的出现是为了解决企业级开发应用的复杂性,spring的通过注册bean的方式来管理类,但是随着业务的增加,使用xml配置bean的方式也显得相当繁琐,所以springboot就是为了解决spring配置繁琐的问题而诞生的,并且近几年来非常流行开启我的第一个HelloSpringBoot!开启方式根据https://start.spring.io网址创建一个springboot项目

  • 热拔插更换硬盘方法

    热拔插更换硬盘方法热拔插更换硬盘方法如果要替换的磁盘已做了镜像,推荐如下步骤:1.删除该磁盘上所有逻辑卷的复件,使用rmlvcopy命令或unmirrorvg命令。2.从卷组中删除该磁盘,使用reducevg命令。3.使用rmdev命令删除该磁盘定义。4.物理移除该磁盘。如果磁盘不是可热交换的(hot-swappable),可能要求重启系统。5.使备用的磁盘可用。如果磁盘是可

  • PXE及PXE启动

    PXE及PXE启动PXE(Pre-bootExecutionEnvironment)是由Intel设计的协议,它可以使计算机通过网络启动。协议分为client和server两端,PXEclient在网卡的ROM中,当计算机引导时,BIOS把PXEclient调入内存执行,并显示出命令菜单,经用户选择后,PXEclient将放置在远端的操作系统通过网络下载到本地运行。  PXE协议的成功运行需要解决以下

  • 个人对json的一些简单理解?

    个人对json的一些简单理解?json是什么?没有.json结尾的这种文件,json(JavaScriptObjectNotation)是一种简单的数据交换格式,在此之前我也不知道这个东西其实没有想象的那么抽象,看看后面的例子会更清晰json中的数据结构json中只有两种数据基本结构,一种是MAP,或者叫对象,另一种是Array1.Map类似与java中的Map,这里是以{开始,以}结束,内部object内容是键…

  • Maven配置阿里云仓库下载依赖「建议收藏」

    Maven配置阿里云仓库下载依赖「建议收藏」用过Maven的都知道Maven的方便便捷,但由于某些网络原因,访问国外的Maven仓库不便捷,maven默认使用的是国外的中央仓库,下载jar时有时候会因为网络不好等原因下载不全或失败,好在国内像阿里云、网易、JBoos、开源中国等大厂搭建了国内的maven仓库,阿里云的maven仓库使用的比较多:需要使用的话,要在maven的settings.xml文件里配置mirrors的子节点,添加…

  • 小白入门——“贪吃蛇”的C语言实现(详细)

    小白入门——“贪吃蛇”的C语言实现(详细)C语言实现,编译环境VS2017附:easyx图形化(文章末尾)效果图如下(有一些函数kbhit,getch,在这表示为_kbhit与_getch)//不同编译器原因注意在Dev等集成开发软件下可能会CEo(* ̄▽ ̄*)o一、引言作为一个小白,相信大家的心情都是一样的,渴望写一个人生的第一个“贪吃蛇”。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号