基于html5 plus + Mui 移动App开发(一)
使用Html5 plus + Mui 进行移动App开发,有一段时间了,这几日得空,做个资讯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>
至此整个界面分享完毕,后续将分享,数据列表展示界面:
App下载地址:http://m3w.cn/shiquan 欢迎提供宝贵意见!
基于html5 plus + Mui 移动App开发(一)的更多相关文章
- 基于html5 plus + Mui 移动App开发(三)-食全库
食全库-食品安全知识库. 食品安全(food safety)指食品无毒.无害,符合应当有的营养要求,对人体健康不造成任何急性.亚急性或者慢性危害.根据倍诺食品安全定义,食品安全是“食物中有毒.有害物质 ...
- 基于Html5 Plus + Vue + Mui 移动App 开发(二)
基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...
- 基于Html5的移动端APP开发框架
快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业AP ...
- 基于Html5 Plus + Vue + Mui 移动App开发(三)-文件操作(读取、保存、更新数据)
随着手机的发展,现在越来越多的人选择在手机上看书.无论是专业书籍.文学.英语还是网络小说,在手机上看新闻成了人们处理零碎时间的办法.在智能手机里安装一个资讯APP,可以随时.随地查看自己想看的资讯 ...
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发
经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...
- MUI之App开发
一般开发APP分为两种:1.原生ios和android语言开发.2.混合开发,里边穿插h5的东西. 3.第三种:现在因为前端用hbuilder工具开发的情况越来越多,这家公司又提供了更多的选择,所以近 ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面
创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...
- 跨平台移动APP开发进阶(三)hbuilder+mui mobile app 开发心酸路
注:请点击此处进行充电! 1.问题描述:在实现图片轮转时,若将 <script type="text/javascript"> mui("#slider&qu ...
随机推荐
- GopherChina第一天小结
GopherChina第一天小结 今天参加了Asta举办的第五届GopherChina,第一天参加完,颇有感受,晚上回来趁着还有记忆,来做一下记录. 写在前面 一早从9点开始,一天下来一共八个主题,各 ...
- Redis缓存穿透、缓存雪崩和缓存击穿理解
1.缓存穿透(不存在的商品访问数据造成压力) 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并 ...
- 微服务(入门一):netcore安装部署consul
环境准备 vs开发环境:vs2017 consul版本: 1.4.4 netcore版本:2.1 安裝Consul 1.从官网下载consul到本地,选择系统对应的版本进行下载到本地,下载地址:h ...
- 全球第一免费开源ERP Odoo工业互联网生产制造功能模块术语解析
物料清单 物料清单(BoM)用于描述物料.每种物料的数量.以及制造某一产品所需的步骤.由于行业和成品性质的不同,同一个文件可能有不同的命名.例如,在制药行业中,可以使用术语“处方”. 周期 产品周期是 ...
- android消息处理源码分析
一.简介消息处理机制主要涉及到这几个类:1.Looper2.MessageQueue3.Message4.Handler 二.源码分析 Looper.class的关键源码: //保存Looper对象, ...
- Android Glide详细使用教程
此处我只是做个记录,后边再补充 原文地址:http://www.jufanshare.com/content/35.html 这篇文章写的比较清楚,还附有Demo代码.算是不错的Android Gli ...
- 微信小程序中转义字符的处理
在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...
- Exception: Exception caught in workbook destructor. Explicit close() may be required for workbook. 错误解决办法
# 写入表格 writer = pd.ExcelWriter('data.xlsx') new_df.to_excel(writer, sheet_name='sheet', index=True) ...
- Sublime Text2支持Vue语法高亮显示
1.下载vue语法高亮插件vue-syntax-highlight 下载地址:https://github.com/vuejs/vue-syntax-highlight 2.将vue-syntax-h ...
- RIpng配置(GNS3)(第九组)
一.拓扑图 二.路由器配置 路由器R1的配置(配置RIP静态路由协议,路由器对应接口配置相对应的ipv6地址,并给每个接口配置RIP 1 enable) 路由器R2的配置(配置RIP静态路由协议,路由 ...