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

举报
SHQ5785 发表于 2020/12/30 01:10:22 2020/12/30
【摘要】 注:请点击此处进行充电! 1.问题描述:在实现图片轮转时,若将 <script type="text/javascript"> mui("#slider").slider({ interval: 5000 }); </script> 置于图片加载之前,图片不会显示, 解决措施:将其置于图片显示之后才会显示。   2.问题描述:   同上面的问题,会遇到...

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

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

<script type="text/javascript">

mui("#slider").slider({

interval: 5000

});

</script>

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

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

 

2.问题描述

 

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

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

 

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

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

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

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

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

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

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

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

 

图一

                 图二

 

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模式的选项卡,支持原生加速的下拉刷新。如下图:

 

 

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

 

6.问题描述:见下

解决措施:见上。

由此转入Angular框架 

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/47027007

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。