基于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进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
随机推荐
- 再遇angular（angular4项目实战指南）
这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...
- SQL优化指南
慢查询日志 开启撒网模式 开启了MySQL慢查询日志之后,MySQL会自动将执行时间超过指定秒数的SQL统统记录下来,这对于搜罗线上慢SQL有很大的帮助. SHOW VARIABLES LIKE 's ...
- SpringCloud分布式微服务搭建（二）
这个例子主要是将zuul和eureka结合起来使用,zuul作为反向代理,同时起到负载均衡的作用,同时网关后面的消费者也作为服务提供者,同时提供负载均衡. 一.API网关(摘自百度) API网关是一个 ...
- kubernetes实践之四：深入理解控制器（workload）
一．Pod与controllers的关系 controllers:在集群上管理和运行容器的对象 通过label-selector相关联 Pod通过控制器实现应用的运维,如伸缩,升级等 二．Deploy ...
- MVC、MVP、MVVM 模式对比
MVC.MVP和MVVM这些开发模式为了分离视图(View)和模型(Model)而提出来的,直白说就是为了前后端分离. 1. MVC(Model View Controller)模式 MVC是比较直观 ...
- 使用Fiddler获取OAuth2认证的access token时候返回502
微软动态CRM专家罗勇 ,回复322或者20190402可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 我这里Fiddler的Composer功能来获取OAuth2 认 ...
- Python之路【第二篇】:Python基础
Python基础 对于Python,一切事物都是对象,对象基于类创建 所以,以下这些值都时对象:"zhurui".22.['北京','上海','深圳'],并且是根据不同的类生成的对 ...
- Linux 开启和关闭 Ping 操作
Linux 默认是开启 ping 操作的,通过以下两种方式可以开启和关闭 ping 操作 . 1.修改内核参数 通过内核参数设置也有两种方式,一种是临时修改,一种是永久修改. 1.1 临时设置 PIN ...
- 解决@ResponseBody注解返回的json中文乱码问题
1. 简介 主要解决@ResponseBody注解返回的json中文乱码问题. 2.解决方案 2.1mvc加上注解(推荐此方法) 在mvc配置文件中假如下面配置(写在 <mvc:annotati ...
- Redis常用数据类型和事物以及并发
Redis数据类型 基本类型(String int): 如 set key value .get key 等 所有命令都是按照 key value keys * 可以将全部数据列出,其中后面的 &qu ...