avatar

目录
【前端22_MUI】初步认识MUI、UI块

混合开发

混合开发,是介于H5和原生之间的一种开发模式,既有原生的部分,也有H5的部分,结合了各自有优点,这种开发模式,既可以做到跨平台,也能上各大应用市场。


MUI 初步的认识

https://dev.dcloud.net.cn/mui/
这是他的官网


HBulid初入时遇到的坑

Q0:Uncaught ReferenceError: plus is not defined (提示: 请在plus ready后再调用plus api)

这个报错的话应该是你没有添加事件,上来就运行 mui .XXX 的控件了
我解决的方案就是加个事件来触发mui.XXX

Q1:上机运行报错error

修改文件夹的名字,不要有横杠 - 或是下划线 _ 之类的符号(我找了好久的错误,浏览器能运行,到手机上就不好使了)
在这里插入图片描述
报错信息如下

在这里插入图片描述

Q2:手机上显示主页怎么调?

不用每次都修改index,而是
在这里插入图片描述


MUI框架

Dialog 消息框

如果想要一个消息框类似如下,可以写这样的代码

在这里插入图片描述

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< body>
< script src="../../js/mui.js">< /script>
< script type="text/javascript">
mui.init()
< /script>
< button class="btn1">弹出提示框< /button>
< /body>
< script type="text/javascript">
var btn = document.querySelector('.btn1')
var arr = ['取消','确定'];
btn.onclick = function(){
mui.confirm('这是一段内容','标题',arr,function(e){
console.log(e);
});
}
< /script>

如果想把她的样式变成IOS的,可以在confrim的参数里添加 div

Javascript
1
2
3
4
5
6
btn.onclick = function(){
mui.confirm('这是一段内容','标题',arr,function(e){
console.log(e);
/* 在下面添加 'div' */
},'div');
}

图文列表

样式如下在这里插入图片描述
代码如下

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
< ul class="mui-table-view">
< li class="mui-table-view-cell mui-media">
< a href="javascript:;">
< img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png">
< div class="mui-media-body">
幸福
< p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?< /p>
< /div>
< /a>
< /li>
< li class="mui-table-view-cell mui-media">
< a href="javascript:;">
< img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png">
< div class="mui-media-body">
木屋
< p class='mui-ellipsis'>想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.< /p>
< /div>
< /a>
< /li>
< li class="mui-table-view-cell mui-media">
< a href="javascript:;">
< img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png">
< div class="mui-media-body">
CBD
< p class='mui-ellipsis'>烤炉模式的城,到黄昏,如同打翻的调色盘一般.< /p>
< /div>
< /a>
< /li>
< /ul>

侧滑菜单

样式类似这样的
在这里插入图片描述

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< !-- 在最外层这个类里改变样式
mui-scalable 类似手机qq
mui-slide-in 菜单也会跟随着滑动
-->
< !-- 侧滑导航根容器 -->
< div class="mui-off-canvas-wrap mui-draggable mui-scalable">
< !-- 菜单容器 -->
< aside class="mui-off-canvas-left">
< div class="mui-scroll-wrapper">
< div class="mui-scroll">
< !-- 菜单具体展示内容 -->
菜单具体展示内容
< /div>
< /div>
< /aside>
< !-- 主页面容器 -->
< div class="mui-inner-wrap">
< !-- 主页面标题 -->
< header class="mui-bar mui-bar-nav">
< a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left">< /a>
< h1 class="mui-title">标题< /h1>
< /header>
< div class="mui-content mui-scroll-wrapper">
< div class="mui-scroll">
< !-- 主界面具体展示内容 -->
主界面具体展示内容
< /div>
< /div>
< /div>
< /div>

选择器

样式如下

在这里插入图片描述
代码如下

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
< head>
< meta charset="utf-8">
< title>< /title>
< meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
< link href="../../css/mui.css" rel="stylesheet" />
< link rel="stylesheet" href="../../css/mui.picker.css">
< link rel="stylesheet" href="../../css/mui.poppicker.css">

< /head>

< body>
< script src="../../js/mui.js">< /script>
< !-- picker的引入要在mui 的下面 -->
< script src="../../js/mui.picker.js">< /script>
< script src="../../js/mui.poppicker.js">< /script>
< script type="text/javascript">
mui.init()
< /script>
< button class="btn1">点我触发选择器< /button>
< /body>

< script>
(function($,doc){
$.init();
var user = new $.PopPicker();
user.setData([
{value:'cxq',text:'陈晓晴'},
{value:'zzh',text:'张子涵'},
{value:'hsj',text:'黄圣杰'}
])
var btn = doc.querySelector('.btn1');
btn.addEventListener('tap',function(){
user.show(function(items){
console.log(items);
//return false 弹框不会自动关闭
})
})
}
)(mui,document)
< /script>

城市三级联动

想要做这个需要以下文件

链接:https://pan.baidu.com/s/1vGK2rjoTJ4SLpPdiv6UgDg
提取码:219x

样式如下
在这里插入图片描述

代码如下

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
< head>
< meta charset="utf-8">
< title>< /title>
< meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
< link href="../../css/mui.css" rel="stylesheet" />
< link rel="stylesheet" href="../../css/mui.picker.css">
< link rel="stylesheet" href="../../css/mui.poppicker.css">
< /head>

< body>
< script src="../../js/mui.js">< /script>
< script src="../../js/mui.picker.js">< /script>
< script src="../../js/mui.poppicker.js">< /script>
< script src="../../js/city.data-3.js">< /script>
< script type="text/javascript">
mui.init()
< /script>
< !-- 显示的容器 -->
< div id="what">< /div>
< /body>
< script>
/* 设置选择器的层级 */
var picker = new mui.PopPicker({
layer: 3
});
picker.setData(cityData3);
picker.pickers[0].setSelectedIndex(1);
picker.pickers[1].setSelectedIndex(1);
picker.show(function(SelectedItem) {
console.log(SelectedItem);
//显示你选的是那个城市
what.innerHTML = SelectedItem[0].text + SelectedItem[1].text;
})
< /script>

选项卡

样式如下
在这里插入图片描述

代码如下

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
< body>
< script src="../../js/mui.js">< /script>
< script type="text/javascript">
mui.init()
< /script>
< header class="mui-bar mui-bar-nav">
< a href="" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left">< /a>
< h1 class="mui-title">标题你好< /h1>
< /header>
< nav class="mui-bar mui-bar-tab">
< a href="#fir" class="mui-tab-item mui-active">
< span class="mui-icon mui-icon-home">< /span>
< span class="mui-tab-label">首页< /span>
< /a>
< a href="#sec" class="mui-tab-item ">
< span class="mui-icon mui-icon-help">< /span>
< span class="mui-tab-label">help< /span>
< /a>
< a href="#thr" class="mui-tab-item ">
< span class="mui-icon mui-icon-home">< /span>
< span class="mui-tab-label">charset< /span>
< /a>
< a href="#for" class="mui-tab-item ">
< span class="mui-icon mui-icon-home">< /span>
< span class="mui-tab-label">首页< /span>
< /a>
< /nav>
< div class="mui-content">
< div id="fir" class="mui-control-content mui-active">
1
< /div>
< div id="sec" class="mui-control-content">
22
< /div>
< div id="thr" class="mui-control-content ">
333
< /div>
< div id="for" class="mui-control-content">
4444
< /div>
< /div>
< /body>

导航栏滑动透明度

卧槽不知道咋写标题了,看效果吧
在这里插入图片描述
具体实现如下

html
1
2
3
4
5
6
7
< !-- 导航栏滑动逐渐变得不透明,只需要这里的一个类 mui-bar-transparent-->
< header class="mui-bar mui-bar-transparent">
< h1 class="mui-title">标题< /h1>
< /header>
< div id="" class="mui-content">
< img src="../../imgs/girl1.png">
< /div>

滑动选项

样式如下
在这里插入图片描述
代码如下

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
< div class="mui-content">
< ul class="mui-table-view">
< !-- 左滑删除 -->
< li class="mui-table-view-cell">
< div class="mui-slider-right mui-disabled">
< a class="mui-btn mui-btn-red">删除< /a>
< /div>
< div class="mui-slider-handle">
左滑删除
< /div>
< /li>

< !-- 右滑删除 -->
< li class="mui-table-view-cell">
< div class="mui-slider-left mui-disabled">
< a class="mui-btn mui-btn-red">删除< /a>
< a class="mui-btn mui-btn-blue">删除< /a>
< /div>
< div class="mui-slider-handle">
右滑删除
< /div>
< /li>

< !-- 左右滑删除 -->
< li class="mui-table-view-cell">
< div class="mui-slider-left mui-disabled">
< a class="mui-btn mui-btn-red">删除< /a>
< /div>
< div class="mui-slider-right mui-disabled">
< a class="mui-btn mui-btn-red">删除< /a>
< /div>
< div class="mui-slider-handle">
左右滑删除
< /div>
< /li>
< /ul>
< /div>
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/51350.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论