欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

基于html5 plus + Mui 移动App开发(一)

程序员文章站 2022-03-28 19:58:47
使用Html5 plus + Mui 进行移动App开发,有一段时间了,这几日得空,做个资讯App分享给大家。 今天主要分享主页实现,首先看下效果: 此界面主要分为:标题、内容分类列表、搜索及设置按钮。 标题 内容分类列表 搜索框 设置按钮 界面定义完后,接下来进行事件定义,实现交互效果: 完整代码 ......

使用html5 plus + mui 进行移动app开发,有一段时间了,这几日得空,做个资讯app分享给大家。

今天主要分享主页实现,首先看下效果:

基于html5 plus + Mui 移动App开发(一)

此界面主要分为:标题、内容分类列表、搜索及设置按钮。

标题

<header class="mui-bar mui-bar-nav">
	<h1 class="mui-title">实全科技</h1>
</header>

内容分类列表

<ul id="btndefault" class="mui-table-view" style="margin-top: -5px;">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            财经
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            科技
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             财经
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             体育
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             军事
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             文化
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             社会
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             娱乐
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             游戏
        </a>
    </li>
</ul>

搜索框

<div class="mui-input-row mui-search" style="margin-top: 10px;">
    <input type="search" id="btnsearch" class="mui-input-clear mui-input" placeholder="搜索">
</div>

设置按钮

<ul class="mui-table-view" style="margin-top: 10px;">
    <li class="mui-table-view-cell">
        <a id="btnsetting" class="mui-navigate-right">
             设置
        </a>
    </li>
</ul>

界面定义完后,接下来进行事件定义,实现交互效果:

mui('#btndefault').on('tap', 'a', function() {
    console.log(json.stringify(this.innertext));
    //打开新窗口
    let keyword = this;
    mui.openwindow({ 
        url: 'pages/360news.html',
        id: '360news',
        extras: {
            keyword: this.innertext
        }
    });
});

let btnsetting = document.getelementbyid("btnsetting");
btnsetting.addeventlistener("tap",function(){
    mui.openwindow("pages/setting.html","setting"); 
});

let btnsearch = document.getelementbyid("btnsearch");
btnsearch.addeventlistener("keypress",function(event) {
    if(event.keycode == "13") {
        document.activeelement.blur();//收起虚拟键盘
        mui.openwindow({ 
            url: 'pages/360news.html',
            id: '360news',
            extras: {
                keyword: string(btnsearch.value).trim()
            }
        });//todo 完成搜索事件
        event.preventdefault(); // 阻止默认事件---阻止页面刷新
    }
});

完整代码:

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="pages/css/mui.min.css" rel="stylesheet" />
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">实全科技</h1>
    </header>
    <div class="mui-content">
        <div class="mui-input-row mui-search" style="margin-top: 10px;">
            <input type="search" id="btnsearch" class="mui-input-clear mui-input" placeholder="搜索">
        </div>
        <ul id="btndefault" class="mui-table-view" style="margin-top: -5px;">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    财经
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    科技
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     财经
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     体育
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     军事
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     文化
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     社会
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     娱乐
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     游戏
                </a>
            </li>
        </ul>
        
        <ul class="mui-table-view" style="margin-top: 10px;">
            <li class="mui-table-view-cell">
                <a id="btnsetting" class="mui-navigate-right">
                     设置
                </a>
            </li>
        </ul>
        <div style="margin-bottom: 10px; text-align: center;"></div>
    </div>
    <script src="pages/js/mui.min.js"></script>
    <script type="text/javascript">
        mui.init({
            swipeback:true //启用右滑关闭功能
        });
        mui.plusready(function(){
            mui('#btndefault').on('tap', 'a', function() {
                console.log(json.stringify(this.innertext));
                //打开新窗口
                let keyword = this;
                mui.openwindow({ 
                    url: 'pages/360news.html',
                    id: '360news',
                    extras: {
                        keyword: this.innertext
                    }
                });
            });
            
            let btnsetting = document.getelementbyid("btnsetting");
            btnsetting.addeventlistener("tap",function(){
                mui.openwindow("pages/setting.html","setting"); 
            });
            
            let btnsearch = document.getelementbyid("btnsearch");
            btnsearch.addeventlistener("keypress",function(event) {
                if(event.keycode == "13") {
                    document.activeelement.blur();//收起虚拟键盘
                    mui.openwindow({ 
                        url: 'pages/360news.html',
                        id: '360news',
                        extras: {
                            keyword: string(btnsearch.value).trim()
                        }
                    });//todo 完成搜索事件
                    event.preventdefault(); // 阻止默认事件---阻止页面刷新
                }
            });
        });
        
    </script>
</body>
</html>

至此整个界面分享完毕,后续将分享,数据列表展示界面:

基于html5 plus + Mui 移动App开发(一)

 app下载地址: 欢迎提供宝贵意见!