基于Html5 Plus + Vue + Mui 移动App 开发（二）
基于Html5 Plus + Vue + Mui 移动App 开发（二）
界面效果：
本页面采用Html5 Plus + Vue + Mui 开发移动界面，本页面实现：
1、下拉刷新、上拉获取更多功能；
2、使用Vue 进行数据绑定；
3、使用WebView 创建打开新的界面；
源码如下：
<!doctype html>
<html> <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.min.css" rel="stylesheet" />
</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 id="title" class="mui-title">实全科技</h1>
</header>
<div class="mui-content mui-scroll-wrapper" id="tableView">
<div class="mui-card" v-for="item in news">
<div class="mui-card-header">
<label v-html="item.title">营业执照</label>
</div>
<div class="mui-card-content">
<div class="mui-card-content-inner mui-navigate-right" @tap="opendetail(item)" >
<p v-html="item.content"></p>
<div style="background:no-repeat;" v-for="url in item.imageUrls">
<img v-bind:src="url" style="width:100%;display:inline-block;height:auto;" />
</div>
</div>
</div>
<div class="mui-card-footer">
<h5>时间：<label v-html="item.publishDateStr"></label> 作者：<label v-html="item.posterScreenName"></label></h5>
</div>
</div>
<div style="margin-bottom: 20px; text-align: center;"></div>
</div> <script src="js/mui.min.js"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shiquan.setting.js" type="text/javascript"></script>
<script type="text/javascript">
var vue = new Vue({
el: '#tableView',
data: {
news: [] //列表信息流数据
}
});
//mui初始化，配置下拉刷新
mui.init({
pullRefresh: {
container: '#tableView',
down: {
style: 'circle',
offset: '0px',
auto: true,
callback: function() {
if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
plus.nativeUI.toast('似乎已断开与互联网的连接', {
verticalAlign: 'top'
});
return;
}
pullRefreshDown();
}
},
up: {
height: 50,
auto: true,
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
callback: pullupRefresh
}
}
});
var loadData = false;
var hasNext = false;
var pageToken = "";
var keyword = "";
function pullRefreshDown(){
setTimeout(function(){
if(keyword == ""){
mui('#tableView').pullRefresh().endPulldown();
return;
}
if(loadData){
return;
}
//keyword = keyword || "新闻";
//请求列表信息流
let ajaxUrl = shiquan.SERVERURL+'/news/qihoo?apikey='+shiquan.APIKEY + "&site="+shiquan.SITE + "&kw="+keyword;
console.log("ajaxUrl="+ajaxUrl);
mui.ajax(ajaxUrl,{
data:{},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:30000,//超时时间设置为10秒；
headers:{'Content-Type':'application/json'},
success:function(result){
mui('#tableView').pullRefresh().endPulldown();
if(result.retcode != "000000"){
plus.nativeUI.toast("读取失败："+result.message);
return;
}
console.log(JSON.stringify(result));
hasNext = result.hasNext;
pageToken = result.pageToken;
vue.news = result.data;
},
error:function(xhr,type,errorThrown){
mui('#tableView').pullRefresh().endPulldown();
//异常处理；
console.log("error:xhr="+xhr+" type="+type + " thrown="+errorThrown);
}
});
},1500);
}; function pullupRefresh() {
setTimeout(function() {
console.log("hasNext:" + hasNext);
console.log("pageToken:" + pageToken);
mui('#tableView').pullRefresh().endPullup(hasNext == false); //参数为true代表没有更多数据了。
if(hasNext == false)
return; if(keyword == ""){
return;
}
//请求列表信息流
let ajaxUrl = shiquan.SERVERURL+'/news/qihoo?apikey='+shiquan.APIKEY + "&site="+shiquan.SITE + "&kw="+keyword+"&pageToken="+pageToken;
console.log("ajaxUrl="+ajaxUrl);
mui.ajax(ajaxUrl,{
data:{},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:30000,//超时时间设置为10秒；
headers:{'Content-Type':'application/json'},
success:function(result){
mui('#tableView').pullRefresh().endPulldown();
if(result.retcode != "000000"){
plus.nativeUI.alert("读取失败："+result.message);
return;
}
console.log(JSON.stringify(result));
//vue.news = result.data;
hasNext = result.hasNext;
pageToken = result.pageToken;
result.data.forEach(function(item) {
vue.news.push(item);
});
},
error:function(xhr,type,errorThrown){
mui('#tableView').pullRefresh().endPulldown();
//异常处理；
console.log("error:xhr="+xhr+" type="+type + " thrown="+errorThrown);
}
});
}, 2000);
}
mui.plusReady(function() {
var self = plus.webview.currentWebview();
keyword = self.keyword;
document.getElementById("title").innerText = self.keyword || "实全科技";
}); /**
* 打开新闻详情
*
* @param {Object} item 当前点击的新闻对象
*/
function opendetail(item) {
mui.openWindow({
url: '360detail.html',
id: '360detail',
extras: {
title:item.title,
url: item.url
}
});
}
</script>
</body> </html>
App下载地址：http://m3w.cn/shiquan 欢迎提供宝贵意见！
基于Html5 Plus + Vue + Mui 移动App 开发（二）的更多相关文章
- 基于Html5 Plus + Vue + Mui 移动App开发（三）-文件操作（读取、保存、更新数据）
随着手机的发展,现在越来越多的人选择在手机上看书.无论是专业书籍.文学.英语还是网络小说,在手机上看新闻成了人们处理零碎时间的办法.在智能手机里安装一个资讯APP,可以随时.随地查看自己想看的资讯 ...
- 基于html5 plus + Mui 移动App开发（一）
使用Html5 plus + Mui 进行移动App开发,有一段时间了,这几日得空,做个资讯App分享给大家. 今天主要分享主页实现,首先看下效果: 此界面主要分为:标题.内容分类列表.搜索及设置按钮 ...
- 基于html5 plus + Mui 移动App开发（三）-食全库
食全库-食品安全知识库. 食品安全(food safety)指食品无毒.无害,符合应当有的营养要求,对人体健康不造成任何急性.亚急性或者慢性危害.根据倍诺食品安全定义,食品安全是“食物中有毒.有害物质 ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发
经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...
- MUI之App开发
一般开发APP分为两种:1.原生ios和android语言开发.2.混合开发,里边穿插h5的东西. 3.第三种:现在因为前端用hbuilder工具开发的情况越来越多,这家公司又提供了更多的选择,所以近 ...
- vue移动音乐app开发学习（二）：页面骨架的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
- 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 ...
- vue移动音乐app开发学习（三）：轮播图组件的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
随机推荐
- react源码总览(翻译)
用react也有段时间了, 是时候看看人家源码了. 看源码之前看到官方文档 有这么篇文章介绍其代码结构了, 为了看源码能顺利些, 遂决定将其翻译来看看, 小弟英语也是半瓢水, 好多单词得查词典, 不当 ...
- HttpServletRequest 接口、HttpServletResponse 接口、请求转发与重定向
上篇文章我们讲了servlet的基本原理,这章将讲一下剩余的部分. HttpServletRequest 接口 该接口是 ServletRequest 接口的子接口,封装了 HTTP 请求的相关信息, ...
- Google 的 QUIC 华丽转身成为下一代网络协议： HTTP/3.0
HTTP/2.0 还没有普及,HTTP/3.0 标准就要被制定了. 据 IETF 透露,HTTP-over-QUIC 实验协议将被重命名为 HTTP/3,并成为 HTTP 协议的第三个正式版本. IE ...
- SpringBoot进阶教程(二十八)整合Redis事物
Redis默认情况下,事务支持被禁用,必须通过设置setEnableTransactionSupport(true)为使用中的每个redistplate显式启用.这样做会强制将当前重新连接绑定到触发m ...
- 微服务架构之「 API网关 」
在微服务架构的系列文章中,前面已经通过文章<架构设计之「服务注册 」>介绍过了服务注册的原理和应用,今天这篇文章我们来聊一聊「 API网关 」. 「 API网关 」是任何微服务架构的重要组 ...
- 史上最详尽的NLP预处理模型汇总
文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 转自 | 磐创AI(公众号ID:xunixs) 作者 | AI小昕 编者按:近年来,自然语言处理(NL ...
- Echarts 南海诸岛简图显示位置调整
最近需要echart同时显示海南岛和南海诸岛,开始想寻找南海诸岛的数据,经过查找,这种简图数据是没有的(china.js地图数据一一找过了),下图是echarts的一些示例,没有满足我们的要求 ...
- 全球排名第一的免费开源ERP Odoo 12产品发布会北京站开始报名
Odoo V12 产品(北京)发布会 暨企业数字化转型论坛 快速报名通道:http://odoochina.mikecrm.com/uG8nNu4 随着新版本Odoo 12的发布,开源智造(OSCG. ...
- 第三周LINUX学习笔记
周期性任务丶find 文件查找:find命令 locate :在数据库中查找,非实时查找,精确度不高,查找速度快,模糊查找 /tmp/passwad/a.textfind:实时查找:速度慢 ,精确 ...
- 20170319 - pycurl 提示 libcurl link-time version is older than compile-time version
使用 conda update anaconda 升级后,运行程序得到如下提示: ImportError: pycurl: libcurl link-time version (7.45.0) is ...