文档章节

MUI初体验

人工智能Ding
 人工智能Ding
发布于 2017/07/27 16:42
字数 612
阅读 145
收藏 1

        最近有个项目用到了MUI框架。感觉这个框架确实很强大啊,涵盖的功能很全面。项目里的需要基本都通过框架解决了。MUI配合Hbuilder一起使用,简直有种飞一样的感觉,省时省心。

        当然在使用该框架的过程中,同样也遇到了一些问题,下面就来分享下。

  • 关于<a>标签

        MUI是一个移动端框架,很多思维都是移动端优先。框架默认禁用了<a>标签的跳转功能。主要是<a>标签跳转页面时,手机页面会出现白屏,影响用户观感。

        并且不推荐使用click及onclick操作,快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作,统统使用如下代码:

mui('body').on( 'tap' , 'a' , function(){
//业务逻辑
} )

        但是有时候,项目的具体情况是需要保留<a>标签的跳转功能。总不能一个个去给<a>标签绑定“tap”事件吧。利用绑定事件代理,给所有的<a>标签绑定“tap”事件,一步到位。

// 监听tap事件,解决 a标签 不能跳转页面问题
mui('body').on('tap','a',function(){
    document.location.href=this.href;}
);
  • 关于list组件

        在使用list组件时,当内容比较长,超出屏幕范围的时候。默认状态下,不能拖动上翻,也没有滚动条。可以用以下方法解决。

//内容过长是可以滚动
(function($){
	$(".mui-scroll-wrapper").scroll({
	bounce: false,//滚动条是否有弹力默认是true
	indicators: false, //是否显示滚动条,默认是true
	});
})(mui);
  • 关于侧滑菜单

        

        需求是点击右上角汉堡图标,弹出侧边栏导航菜单。MUI默认的是右滑就可以唤出菜单,而然需求并不需要这样,需要禁用掉右划唤出菜单功能。代码如下:

var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
offCanvasInner.addEventListener('drag', function(event) {
	event.stopPropagation();
});

 

以上是关于MUI框架的初体验,使用感觉挺好的,特别适合移动端的开发。便捷高效,给作者赞一个。

© 著作权归作者所有

人工智能Ding
粉丝 0
博文 12
码字总数 4474
作品 0
武汉
程序员
私信 提问
mui混合开发(二)

简述:混合App的流畅性不比原生的App,当网络不好的时候出现空白页面体验很不好,mui文档给出了两个解决方案,方案一很简单,方案二是预加载模式下一章节配合mui自定义事件详细讲解 一:打开...

全村的希望iOS
2018/01/10
0
0
MUI-最接近原生App体验的前端框架怎么样?

MUI-最接近原生App体验的前端框架怎么样?

gfjhgsfrg
2016/07/26
379
4
计划类应用--滴石

取水滴石穿之意,计划类app,一切始于计划成于计划。 使用html5+ + mui+hbuilder构建 基于html5+规范 HTML5中国产业联盟,简称“HTML5+联盟”,是为了更好的推进HTML5的商用、更好的为HTML5...

uikoo9
2015/03/05
2.8K
0
基于 MUI 构建一个具有 90 +页面的APP应用

前言 mui是一款接近原生App体验的前端框架,只需要掌握前端技术就可以开发APP应用,官方有提供功能比较全面的demo版本, 但在实战中总会遇到一些不可避免但坑,对于没有接触过mui的开发者,难...

so丶简单
2018/08/20
0
0
基于MUI构建的具有90+页面的移动APP

#前言 mui是一款接近原生App体验的前端框架,只需要掌握前端技术就可以开发APP应用,官方有提供功能比较全面的demo版本, 但在实战中总会遇到一些不可避免但坑,对于没有接触过mui的开发者,...

EasyTuan
2018/08/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

哪些情况下适合使用云服务器?

我们一直在说云服务器价格适中,具备弹性扩展机制,适合部署中小规模的网站或应用。那么云服务器到底适用于哪些情况呢?如果您需要经常原始计算能力,那么使用独立服务器就能满足需求,因为他...

云漫网络Ruan
今天
10
0
Java 中的 String 有没有长度限制

转载: https://juejin.im/post/5d53653f5188257315539f9a String是Java中很重要的一个数据类型,除了基本数据类型以外,String是被使用的最广泛的了,但是,关于String,其实还是有很多东西...

低至一折起
今天
23
0
OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
11
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
9
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部