第一次使用mui框架制作web app项目的一些心得

本人在写写这篇文章的到时候使用的是mui的3.3版本

GitHub上的mui是3.6版本，如下的是github项目地址，大家可以下载
https://github.com/dcloudio/mui

总体感觉各种动画效果很流畅，demo很丰富，api也很详细，提供的组件也很全
但是由于主要针对的是native，所以在制作web的时候还是会遇见一些问题

一、a标签链接跳转失效

**解决方法：**可在你自己的js文件里加上如下代码
javascript 代码

mui('body').on('tap', 'a', function() {//如果遇到特殊跳转连接 例如header自带弹出侧拉导航菜单按钮  需要排除if(this.id != "offCanvasBtn"){ document.location.href = this.href;}
});

二、下图为官网api提供的侧拉导航显示隐藏的监听事件shown 和 hidden 实际使用过程中并无任何作用谨慎使用

三、官网api提供的返回顶部的代码实际使用中无效如下
javascript 代码

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);

解决方法：
javascript 代码

mui('#offCanvasContentScroll').scroll().scrollTo(0,0,100);

四、如果使用侧拉导航框架dom结构（如下代码）会导致正文中所有的文案图片的长按复制保存等功能失效
html 代码

<div class="mui-off-canvas-wrap mui-draggable"><!--侧拉导航HTML--><div class="mui-inner-wrap"><!--正文HTML--></div>
</div>

解决方法：
可以在mui.js(或mui.min.js)里搜索如下代码部分
javascript 代码

preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/}},d)

然后在需要例外的tagName里加上你需要的标签，比如IMG、P等；
javascript 代码

preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO|IMG|P)$/}},d)

五、一个比较特殊的坑
当选择侧滑导航的动画样式为 “主界面不动、菜单移动” （对应类样式 mui-slide-in）的时候
如果是导航菜单位置在左侧，那么如果由于误操作，不小心先稍微向左滑动一下的话（如果在右侧就是先向右滑了），那么通过绑定点击事件弹出菜单的按钮将失效

官网demo地址
http://dcloud.io/hellomui/examples/offcanvas-drag-right.html

此示例中的先选择动画样式为 “主界面不动、菜单移动” 然后再向左滑动那么下图所框选的中间蓝色按钮弹出侧拉导航功能无效

ps:顺便说下侧拉导航的弹出/或隐藏的手势不是左右滑动（swiper）而是拖动（drap）

第一次使用mui框架制作web app项目的一些心得相关推荐

第一次，触碰Web App项目，栽过的那些坑。
此项目是一个IPad上的Web App项目,页面的滚动用了最新的IScroll 5.0 插件, 确实是挺潮的. 项目用时 1个月完成的, 准备今天晚上上线. 这是年前的最后一篇文章了,与众位博友分享 ...
【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...
Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
原文https://www.cnblogs.com/ljq66/p/9980372.html 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知 ...
视频教程-React全栈：前后端分离的招聘Web App项目（含资料）-ReactJS
React全栈:前后端分离的招聘Web App项目(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国 ...
webstorm配置环境变量_sulky环境配置，node.js安装以及如何运行webstorm的web app项目...
该文章用来记笔记用的,主要记录如何在webstorm上运行一个app项目,希望对于需要的人有帮助. 首先,要运行web app项目,必须先装好相应的环境以及配置. 其中node.js和其他需要的配置在 ...
mui框架手机端APP开发
最近项目繁忙一直没有时间回顾,此次梳理一下利用mui框架进行手机端app的开发的具体操作. 首先介绍一下我们需要用到的轻量级开发工具HBuilder,HBuilder最主要的优点就是快 ...
MUI 搞笑段子手机app项目源码
自己研究了几天的MUI框架,尝试开发了个搞笑段子的app. 目前功能尚不完善,主页可以看搞笑短视频,有个刷新按钮,项目包含了登录注册修改密码等页面, 有想学习mui框架的朋友可以下载源码学习一下,项目 ...
#HTML5 Web App项目秀#国内首款大型HTML5页游《黎明帝国》开发背后
HTML5游戏<黎明帝国>,磊友科技打造,官网试玩正想游戏邦创始人郑金条在<程序员>杂志专栏文章中所说:"HTML5被整体市场所观望的除了技术标准和规范不够成熟外, ...
MUI框架-05-用MUI做简单App界面
MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

第一次使用mui框架制作web app项目的一些心得

第一次使用mui框架制作web app项目的一些心得相关推荐

最新文章

热门文章