mui框架，mui框架优缺点
各位老铁们好，相信很多人对mui框架都不是特别的了解，因此呢，今天就来为大家分享下关于mui框架以及mui框架优缺点的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
mui框架优缺点
MUI是一套前端框架，由DCLOUD公司研发而成，提供大量H5和js语言组成的组件，大大提高了开发效率，可以用于开发web端应用、webAPP、混合开发等应用。利用MUI框架，用户在使用APP时可以得到接近原生APP的操作体验。
优势：
目前的APP开发中，大部分还停留在webapp开发中，相当于用浏览器的方式去运行整个APP,由于浏览器天然的切页白屏，不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题，导致HTML5APP的用户体验比较差，而MUI框架在体验与性能上接近原生App效果。MUI框架以IOS7为基础，补充android特有控件，页面切换带有侧滑，下滑等效果，用户体验度高。
对比其他移动端常用框架：
JQUERYMOBILE:性能低，样式丑。（MPAS以前用的UI框架）
AngularJS的Ionic:PC端的angularjs框架引入移动端，有些笨重。
Bootstrap:PC端的UI框架引入移动端，有些笨重。
自定义样式（MPAS现阶段做法），缺点：所有样式都靠自己命名，写结构，开发量大，吃力不讨好，即使定义了公共样式，但新功能，新页面出来，难免和以前的页面样式有所不同。
劣势:
MUI框架：以IOS7组件为原型设计的UI框架，缺点：组件风格可能和我们设计师的设计风格不符，组件样式不够多，有些东西还需要自己单独的再写。
用了mui框架移动端怎么不能向上滑了
以下是基于zepto的移动端无缝向上滚动并上下触摸滑动插件的完整代码：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
li{list-style:none;}
.box{margin:20px;width:200px;height:128px;overflow:hidden;border:1px solid#ccc;padding:5px 10px 15px;font-size:14px;}
.box ul li{line-height:20px;}
</style>
</head>
<body>
<div class="box">
<ul>
<li>11111111111222222</li>
<li>2222222202</li>
<li>3333333303</li>
<li>4444444404</li>
<li>5555555505</li>
<li>6666666606</li>
<li>1111111111</li>
<li>2222222202</li>
<li>3333333303</li>
<li>4444444404</li>
<li>5555555505</li>
<li>6666666606</li>
</ul>
</div>
<script src="zepto.min.js"></script>
<script src="fx.js"></script>
<script src="touch-0.2.14.min.js"></script>
<script src="zepto.textSlider.js"></script>
<script>
$(function(){
$(".box").textSlider({
speed: 50,//数值越大，速度越慢
line:10//触摸翻滚的条数
});
})
</script>
</body>
插件 zepto.textSlider.js部分：
/*
* textSlider 0.1
* Copyright(c) 2014 tnnyang
* Dependence Zepto v1.1.6& fx.js& touch-0.2.14.min.js
* Author by小坏
*/
(function($){
$.fn.textSlider= function(options){
//默认配置
var defaults={
speed:40,//滚动速度,值越大速度越慢
line:1//滚动的行数
};
var opts=$.extend({}, defaults, options);
var$timer;
function marquee(obj, _speed){
var top= 0;
var margintop;
$timer= setInterval(function(){
top++;
margintop= 0-top;
obj.find("ul").animate({
marginTop: margintop
},0,function(){
var s= Math.abs(parseInt($(this).css("margin-top")));
if(s>= 20){
top= 0;
$(this).css("margin-top", 0);//确保每次都是从0开始，避免抖动
$(this).find("li").slice(0, 1).appendTo($(this));
}
});
}, _speed);
}
this.each(function(){
var speed= opts["speed"],line= opts["line"],_this=$(this);
var$ul=_this.find("ul");
if($ul.height()> _this.height()){
marquee(_this, speed);
}
//触摸开始
_this.on(‘touchstart‘, function(ev){
ev.preventDefault();
clearInterval($timer);
});
//向上滑动
_this.on(‘swipeup‘, function(ev){
ev.preventDefault();
clearInterval($timer);
if($ul.height()> _this.height()){
for(i=0;i<opts.line;i++){
$ul.find("li").first().appendTo($ul);
}
$ul.css("margin-top",0);
}
});
//向下滑动
_this.on(‘swipedown‘, function(ev){
ev.preventDefault();
clearInterval($timer);
if($ul.height()> _this.height()){
for(i=0;i<opts.line;i++){
$ul.find("li").first().before($ul.find("li").last());
}
$ul.css("margin-top",0);
}
});
//触摸结束
_this.on(‘touchend‘,function(ev){
ev.preventDefault();
if($ul.height()> _this.height()){
marquee(_this, speed);
}
});
});
}
})(Zepto);
uniapp和mui的区别
区别如下：
1.使用mui开发效率很高,新手上手难度低,很多js库,想怎么用就这么用,但是需要很高的优化技巧,和要走很多坑,不开发一两款app,是掌握不了精髓的;
2.使用uni-app跟微信小程序一样,有自己的规范和语法(模仿微信小程序的接口与语法,有过小程序开发的上手很快),按照这个规范去写,框架编译时给你优化好了,少走了很多弯路,新手上手难度很大,但是熟悉了开发很快;
mui框架过时了吗
没有过时。截止至2022年11月19日，根据查询MUI相关资料，号称最接近原生APP体验的高性能前端框架的MUI，依旧拥有众多用户群体，没有过时。MUI是一套前端框架，由DCLOUD公司研发而成，提供大量H5和js语言组成的组件，大大提高了开发效率，可以用于开发web端应用、web APP、混合开发等应用。
OK，关于mui框架和mui框架优缺点的内容到此结束了，希望对大家有所帮助。