网页|上手MUI

算法与编程之美

发布于 2020-11-11 10:39:26

7220

发布于 2020-11-11 10:39:26

文章被收录于专栏：算法与编程之美算法与编程之美

1、快速构建页面

1.1 新建含mui的HTML文件

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

图1.1 MUI目录

1.2输入mheader

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

1.3输入mbody

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

图1.2 MUI顶部

1.4设置底部导航栏

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

使用时，只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：

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

登录阿里巴巴矢量图标库，选择图标加入购物车，然后存储为项目，下载到本地，将iconfont.css和iconfont.ttf分别放css和fonts目录下。修改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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-11-10，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法