网页|上手MUI

原创
07/20 00:00
阅读数 24

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。


欢迎加入团队圈子!与作者面对面!直接点击!


1、快速构建页面

 1.1 新建含muiHTML文件

在Hbuilder中,新建HTML文件,选择”含muiHTML“模板,可以快速生成mui页面模板,该模板默认处理了muijscss资源引用。

图1.1 MUI目录

 

1.2输入mheader

顶部标题栏是每个页面都必需的内容,在Hbuilder中输入mheader,可以快速生成顶部导航栏。

 

1.3输入mbody

除顶部导航、底部选项卡两个控件之外,其它控件都建议放在.mui-content控件内,在Hbuilder中输入mbody,可快速生成包含.mui-content的代码块。

图1.2 MUI顶部

 

1.4设置底部导航栏

第一种,MUI有自带的图标库

使用时,只需要在span节点上分别增加.mui-icon.mui-icon-name两个类即可(name为图标名称,例如:weixinweibo等),如下代码即可显示一个微信图标:

<span class="mui-icon mui-icon-weixin"></span>

第二种,可以增加自定义icon图标

登录阿里巴巴矢量图标库,选择图标加入购物车,然后存储为项目,下载到本地,将iconfont.cssiconfont.ttf分别放cssfonts目录下。修改iconfont.css中的文件路径

1.3修改iconfont.css路径

代码效果如下图:

图1.4 MUI页面框架


2、添加页面内容

在MUI官网https://dev.dcloud.net.cn/mui/有各种组件,直接选择合适的组件,复制粘贴,完成布局


3、代码实例

图3.1 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,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

    <style type="text/css">

    .mui-bar-tab .mui-tab-item.mui-active 

    {

        color: #559A47;

    }

    </style>

    <script type="text/javascript" charset="utf-8">

      mui.init();

    </script>

</head>

<body>


<header class="mui-bar mui-bar-nav">

    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">标题</h1>

</header>


<div class="mui-content">


    <nav class="mui-bar mui-bar-tab">  

        <a class="mui-tab-item mui-active">  

            <span class="mui-icon iconfont icon-shouye"></span>  

            <span class="mui-tab-label">首页</span>  

        </a>  

        <a class="mui-tab-item">  

            <span class="mui-icon iconfont icon-tuijian"></span>  

            <span class="mui-tab-label">推荐</span>  

        </a>  

        <a class="mui-tab-item">  

            <span class="mui-icon iconfont icon-xiaoxi"></span>  

            <span class="mui-tab-label">消息</span>  

        </a>  

        <a class="mui-tab-item">  

            <span class="mui-icon iconfont icon-wode"></span>  

            <span class="mui-tab-label">我的</span>  

        </a>  

    </nav>

    

    <div class="mui-input-row mui-search">

    <input type="search" class="mui-input-clear" placeholder="">

    </div>

    

    <div id="slider" class="mui-slider" >

      <div class="mui-slider-group mui-slider-loop">

        <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->

        <div class="mui-slider-item mui-slider-item-duplicate">

          <a href="#">

            <img src="http://placehold.it/400x300">

          </a>

        </div>

        <!-- 第一张 -->

        <div class="mui-slider-item">

          <a href="#">

            <img src="http://placehold.it/400x300">

          </a>

        </div>

        <!-- 第二张 -->

        <div class="mui-slider-item">

          <a href="#">

            <img src="http://placehold.it/400x300">

          </a>

        </div>

        <!-- 第三张 -->

        <div class="mui-slider-item">

          <a href="#">

            <img src="http://placehold.it/400x300">

          </a>

        </div>

        <!-- 第四张 -->

        <div class="mui-slider-item">

          <a href="#">

            <img src="http://placehold.it/400x300">

          </a>

        </div>

        <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->

        <div class="mui-slider-item mui-slider-item-duplicate">

          <a href="#">

            <img src="http://placehold.it/400x300">

          </a>

        </div>

      </div>

      <div class="mui-slider-indicator">

        <div class="mui-indicator mui-active"></div>

        <div class="mui-indicator"></div>

        <div class="mui-indicator"></div>

        <div class="mui-indicator"></div>

      </div>

    </div>

    

    <ul class="mui-table-view mui-grid-view mui-grid-9">

    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

        <a href="#">

            <span class="mui-icon mui-icon-home"></span>

            <div class="mui-media-body">Home</div>

        </a>

    </li>

    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

        <a href="#">

            <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>

            <div class="mui-media-body">Email</div>

        </a>

    </li>

    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

        <a href="#">

            <span class="mui-icon mui-icon-chatbubble"></span>

            <div class="mui-media-body">Chat</div>

        </a>

    </li>

    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

        <a href="#">

            <span class="mui-icon mui-icon-location"></span>

            <div class="mui-media-body">Location</div>

        </a>

    </li>

    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

        <a href="#">

            <span class="mui-icon mui-icon-search"></span>

            <div class="mui-media-body">Search</div>

        </a>

    </li>

    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

        <a href="#">

            <span class="mui-icon mui-icon-phone"></span>

            <div class="mui-media-body">Phone</div>

        </a>

    </li>

        </ul>

    

    <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="http://placehold.it/40x30">

                <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="http://placehold.it/40x30">

                <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="http://placehold.it/40x30">

                <div class="mui-media-body">

                    CBD

                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>

                </div>

            </a>

        </li>

    </ul>

    

</div>

</body>

</html>






END


主  编   |   王文星

       责  编   |   来人间凑数


 where2go 团队


   

微信号:算法与编程之美          

长按识别二维码关注我们!

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

本文分享自微信公众号 - 算法与编程之美(algo_coding)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部