![](https://img-blog.csdnimg.cn/20190828094223974.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
MUI
最接近原生APP体验的高性能前端框架
Trevor Lan
工欲善其事,必先利其器!
展开
-
mui扩展插件mui.showLoading加载框
引言好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写了这么一个扩展插件。CSS和JS代码耦合性应该还是较低的,不妥之处欢迎指教!优点:可以同时兼容Html5和plus,不必为不同环境单独分别Loading组件。缺点:在页面嵌套情况下,遮罩仅对当前页面起作用。使用方法:显示加载框:mui.showLoading("正在...转载 2019-12-07 16:25:08 · 393 阅读 · 0 评论 -
MUI实现日期选择器
前言一般来讲,日期选择器会出现在预约类的APP中,比如酒店预约、旅游预约、图书预约等等,而实现的方式也有许多种,笔者最近在学习MUI了,觉得该小技巧挺不错的,所以做此笔记希望能够对大家有所帮助。实现的效果时间选择器mui.DtPicker({ type:'date'});type 描述 'datetime' 完整日期视图(年月日时分) '...原创 2019-08-28 11:22:35 · 10642 阅读 · 2 评论 -
MUI实现常用的几类对话框
引言在开发行业中,对话框可以说是无处不在的了。在开发界我们一般把对话框分成警告框、确认框、输入框和自动消失的提示框。比如用户无意中点击了关闭按钮,这是我们的程序不能傻乎乎的就关闭了,我们得弹出一个提示框,询问用户是否真的要关闭,否则又得被用户吐槽了,所以在这里笔者记录了一下几种对话框,方便自己日后查阅,如果能帮助到大家那就再好不过了。实现效果警告框mui.ale...原创 2019-08-29 05:51:11 · 1055 阅读 · 0 评论 -
MUI实现右侧导航
实现效果源码<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimu...原创 2019-08-29 05:50:33 · 874 阅读 · 0 评论 -
MUI实现引导页
引言一个有点模样的APP在用户第一次打开时总得显示一些欢迎语之类的东西吧,嗯嗯,那就是我们平时所说的引导页了,在引导页上我们可以展示APP最新的功能,也可以介绍公司信息,如果需要的话还可以放一些推广信息。实现效果案例源码<!DOCTYPE html><html> <head> <meta charset="utf-8"&...原创 2019-08-29 05:50:45 · 731 阅读 · 0 评论 -
MUI实现图片轮播效果
引言图片轮播效果大多数会在出现在商品的详情页或应用首页,它可以用来展示商品详情,也可以用来展示广告信息,活动信息等,所以平时练习一下图片轮播效果的实现还是很有必要的。实现效果案例源码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta...原创 2019-08-29 05:50:54 · 4320 阅读 · 0 评论 -
MUI实现侧方选项卡功能
引言对于线上行业而言,分类栏目可以帮助我们快速找到所需要的商品或文章等。而现在实现这种分类效果的大多数以侧方选项卡的形式来实现,所以掌握该技能可以大大的提高平时的开发效率。实现效果案例源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <tit...原创 2019-08-29 05:51:02 · 1007 阅读 · 0 评论 -
MUI实现自定义图标
引言在日常生活中,我们对图的感知能力总要强于对字的感知能力,所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的,这可以轻轻松松的提高一大截的用户体验。笔者喜欢用MUI来做混合开发,可是在使用的过程中发现MUI自带的小图标并不能满足日常的开发,所以留下此笔记希望能帮助到遇到同样问题的小伙伴们。MUI自带的图标传送门:https://dev.dcloud.net.cn...原创 2019-09-03 12:52:55 · 1241 阅读 · 0 评论 -
MUI实现城市三级联动
引言对于电商行业的开发者来讲,城市三级联动可以说是老伙伴了,不用说了,收货地址肯定会涉及到城市的三级联动,本小节我们来看一个简单的城市三级联动的例子,代码很简单,只要有JS基础和能够熟悉的操作DOM节点即可。实现的效果案例源码<!DOCTYPE html><html> <head> <meta charset="utf-...原创 2019-08-28 10:59:11 · 912 阅读 · 1 评论 -
MUI实现城市二级联动选择器
引言城市的二级联动跟城市的三级联动差不多,不过使用的场景还是有一小点区别的,三级联动往往设计详细信息,而二级联动显示的是一个大概信息,比如在个人信息中要描述用户所在的地区等,下面我们来看一个城市二级联动的小案例。实现的效果源码<!DOCTYPE html><html> <head> <meta charset="utf-...原创 2019-08-28 10:52:46 · 1420 阅读 · 0 评论 -
mui实现上拉刷新与下拉加载功能
引言下拉刷新与上拉加载功能可谓是现在APP开发的两个常见功能,在电脑端我们常常通过点击分页的形式来向用户展示更多内容,不过在移动端我们可不想有这些多余的点击操作,只要想看更多内容只要下拉话上拉就可以了,这个小技巧可以大大的提高用户体验,下面我们来简单的了解一下MUI是如何实现这两种功能的。关键点1:初始化下拉刷新与上拉加载功能mui.init({ pullRefresh...原创 2019-08-15 10:22:02 · 1042 阅读 · 0 评论 -
MUI底部二级菜单
引言底部二级菜单,笔者在原生的APP很少看到该功能,而在微信公众号倒是挺常见的,不过既然在MUI中看到此技巧,那笔者就在此记录一下方便自己日后查阅,同时也希望可以帮助到大家。实现效果案例源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title...原创 2019-08-27 19:38:52 · 1087 阅读 · 0 评论 -
MUI实现底部选项卡
引言本小节以div的形式来模拟底部选项卡,该技巧适合设计业务比较简单的APP,如果业务复杂一点的话(比如需要下拉刷新、上拉加载等功能),那笔者还是推荐使用webview的形式来实现底部选项卡比较好。实现效果案例源码<!DOCTYPE html><html> <head> <meta charset="utf-8"&...原创 2019-08-28 09:31:34 · 1067 阅读 · 0 评论 -
MUI实现透明的导航栏
实现的效果通过JS API的形式来改变导航栏的透明效果mui('.mui-bar-transparent').transparent({ top: 0, offset: 150, duration: 16, scrollby: document.querySelector('.mui-scroll-wrapper')})参数 描述 to...原创 2019-08-28 09:40:04 · 1173 阅读 · 0 评论 -
MUI实现顶部可滑动选项卡
实现效果案例源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1...原创 2019-08-28 09:59:56 · 1350 阅读 · 1 评论 -
MUI实现滑动一定距离再显示内容的效果
引言滑动一定距离后再显示在开发过程中也是挺常见的,比如在一个上拉加载的列表中,当我们滑动到底部显示更多数据时,在底部可以显示一个按钮,当我们点击按钮时可以快速自动回到顶部的功能,当然啦,不单单只有这一个使用场景,其他的功能就要结合业务来实现了。实现的效果源码<!doctype html><html> <head> <me...原创 2019-08-28 10:11:12 · 996 阅读 · 0 评论 -
MUI实现图片预览功能
引言在电商类、阅读类、社交类等APP中经常会涉及到图片预览功能,只有用户愿意,只要点击图片便可单独的显示该图片,并且可以将图片进行放大预览,如何在APP中没有该小技巧的话,那用户体验可能会大打折扣。实现的效果源码<html> <head> <meta charset="utf-8"> <title>图片预览<...原创 2019-08-28 10:26:26 · 1937 阅读 · 0 评论 -
MUI的picker选择器
引言选择器跟下拉列表选择器很相似,某种程度上我们可以把它直接看出下拉列表选择器,后面笔者记录的城市二级联动和城市三级联动也是从该基础上进行拓展的,我们可以通过编码自己实现一级选择器、二级选择器以及三级选择器等等。实现的效果注:使用picker选择器,务必在mui.js/css后中再引用mui.picker.cssmui.poppicker.cssmui.picke...原创 2019-08-28 10:43:09 · 2826 阅读 · 0 评论 -
mui左滑或右滑显示删除功能
引言提高用户体验的关键之一就是所有的操作都简单化,能够一目了然就最好不过了,所以作为开发者的我们得学会一些页面布局技巧,比如左滑或右滑展示更多功能,这种技巧既能简化页面布局又可以实现该有的功能,何乐而不为呢。左滑删除右滑删除案例源码<!doctype html><html> <head> <meta ...原创 2019-08-15 10:09:07 · 2040 阅读 · 1 评论