基于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进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
随机推荐
- Java：基于MD5的文件监听程序
前述和需求说明 和之前写的 Python:基于MD5的文件监听程序 是同样的功能,就不啰嗦了,就是又写了一个java版本的,可以移步 python 版本去看一下,整个的核心思路是一样的.代码已上传Gi ...
- C#动态调用泛型类、泛型方法
在制作一个批量序列化工具时遇到了如下问题,在此记录一下,仅供参考. 主程序加载另一个程序集,将其中的所有类取出,然后对这些类分别调用泛型类或泛型方法.控制台程序解决方案如下: Main工程:提供Wor ...
- C# 数组比较--取得两个集合的交集,差集,并集的方法
方法关键字: 交集:Intersect 差集:Except 并集:Union 使用代码: , , , , }; , , , , }; var 交集 = arr1.Intersect(arr2).ToL ...
- Mybatis高级查询之一对一查询的四种方法
目录 1. 一对一查询 1.1 一对一嵌套结果查询 1.2 使用resultMap配置一对一映射 1.3 使用resultMap的association标签配置一对一映射 1.4 associatio ...
- 对比 Git 与 SVN，这篇讲的很易懂
---恢复内容开始--- 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 导语 本文从 Git 与 SVN 的对比入手,介绍如何通过 Git-SVN 开始 ...
- Windows 10 ADK 版本及下载链接汇总
Windows 评估和部署工具包 (Windows ADK) 具有自定义大规模部署的 Windows 映像以及测试系统.添加的组件和在该系统上运行的应用程序的质量和性能所需的工具. Windows A ...
- sed和awk用法
sed和awk用法 Sed sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为 ...
- C＃中的RDLC报告
介绍 此示例显示如何在C#中生成RDLC报告,您可以为小型,中型和大型企业生成报告. 构建示例 Visual Studio 2013,.Net Frameworm 4.5,MS SQL Server ...
- linux日常服务器部署一些命令使用
今天公司的开发环境的linux服务器,我要了一个账号来玩玩 拿到账号和密码,我就用xshell登陆上去 1.查看已挂载的分区列表 df -h 显示已经挂载的分区列表 2.查看目录中的文件 ls 查看目 ...
- 图解 HTTP 的缓存机制 | 实用 HTTP
题图:by @joewakeford 一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文头(Header),大多数 Http ...