基于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进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
随机推荐
- .netcore2.1使用swagger显示接口说明文档
项目之前开发完接口后,我们还需要写接口说明文档,现在有了swagger方便了很多,可以网页版直接测试,当然了也减少了我们的工作量. 使用swagger生成接口说明文档,大致需要2个步骤 1.从“管理 ...
- Java 在PPT中绘制图形
Microsoft PowerPoint可支持在幻灯片中插入各种类型的图形并且可设置图形填充.线条颜色.图形大小.位置等.下面将通过Java编程来演示在PPT中绘制图形的方法. 工具:Free Spi ...
- 学JAVA的第十九天，抽象类注意事项
最近老师老是不讲新课,好繁!!! 还是来说抽象类吧. public abstract class A{ //因为下边有一个抽象方法,所以这就必须要是一个抽象类,要不然编译不能通过 public voi ...
- 交给子类: Template Method（模板方法模式）【PHP】
Template Method(模板方法模式) ---- 将具体处理交给子类 Template Method 就是定义一个操作中的算法骨架,而将一些步骤延迟到子类中,使得子类可以不改变一个算法的结构可 ...
- 如何给自己的app添加分享到有道云笔记这样的功能
文章同步自http://javaexception.com/archives/34 如何给自己的app添加分享到有道云笔记这样的功能 问题: 在之前的一个开源笔记类项目Leanote中,有个用户反馈想 ...
- Linux 操作系统基础
list : ls 目录: 文件,路径映射. ls : -l : lang 长格式, 显示完整信息. 文件类型: -: 普通文件(f) d: 目录文件 b: 块设备文件(block) c: 字块设备文 ...
- css+js调整当前界面背景音量
展示效果 html代码: <div> <audio id="audio" controls src="https://dbl.5518pay.com/r ...
- Android 音视频同步机制
一.概述 音视频同步(avsync),是影响多媒体应用体验质量的一个重要因素.而我们在看到音视频同步的时候,最先想到的就是对齐两者的pts,但是实际使用中的各类播放器,其音视频同步机制都比这些复杂的多 ...
- JNI实战（四）：C 调用 Java
在前面我们讲了一下如何使用Java调用C,本文我们讲一下如何使用JNI提供的接口来反射得到Java方法进行调用. 主要步骤如下: FindClass (找到Java层的类) GetMethodID / ...
- Flarum轻量级论坛的安装
论坛作为互联网中的远古产物,经历了如QQ群.社区和贴吧等新兴社交工具的冲击,依然能够存在,肯定是有着不可替代的用处,像吾爱.远景等论坛依旧火热.一些博客主也喜欢自己搭建一个论坛作为用户聚集之地. 之前 ...