html5 plus与vue,基于Html5 Plus + Vue + Mui 移动App 开发(二)
基于Html5 Plus + Vue + Mui 移动App 开发(二)
界面效果:
本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现:
1、下拉刷新、上拉获取更多功能;
2、使用Vue 进行数据绑定;
3、使用WebView 创建打开新的界面;
源码如下:
html>
实全科技
实全科技
营业执照
时间: 作者:
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
}
});
}
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
html5 plus与vue,基于Html5 Plus + Vue + Mui 移动App 开发(二)相关推荐
- go+vue——基于gin框架和gorm的web开发实战
go+vue--基于gin框架和gorm的web开发实战 gin框架 视频.资料.笔记 安装Go环境, 添加环境变量(可能自动添加好) 下载 Go 环境变量 goland 报错: GOROOT is ...
- [开源]基于姿态估计的运动计数APP开发(三)
1.前言: 在上一期中[开源]基于姿态估计的运动计数APP开发(二)中,我们已经完成了仰卧起坐算法的开发和windows的demo开发.本期主要是将该算法一直到android平台上面,实现一个andr ...
- [开源]基于姿态估计的运动计数APP开发(二)
1.先展示一下当前的效果 从keep上扒了一段仰卧起坐的视频教程进行计数测试: (CSDN放不了视频,有兴趣的下方评论区留言) 2.回顾: 在上一期的内容中([开源]基于姿态估计的运动计数APP开发( ...
- 基于姿态估计的运动计数APP开发
算法模型应用与实际生活,在原始模型上针对具体任务做了相应的改动,真的是学以致用:而且很好玩,真的让人感觉到了科研的乐趣!所以专门整理收藏 一 前言: 看着自己日渐发福的身材,回想当年的英姿煞爽,感慨颇 ...
- 基于百度地图sdk的地图app开发(七)——导航和模拟导航
这是基于百度地图sdk的地图app开发系列博客第七篇 代码仓库位置:https://github.com/YanhuiLu89/lmap.git 上一篇 基于百度地图sdk的地图app开发(六)--路 ...
- 基于QT的安卓手机蓝牙APP开发
摘要:前段时间用QT写了一个串口调试助手,感觉还可以.因为QT是跨平台的,同样一套代码可以在windows上面跑,也可以在linux上面跑,也可以在安卓手机上面跑.而且不需要修改任何东西,编译器会自动 ...
- html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面
1.项目简介 Nuxt.js是目前比较热门的服务端渲染SSR框架.凭借其更好的SEO.更快的内容到达时间(*首屏渲染速度快*) 加之基于Vue.js技术开发,更易于上手,获得了很多技术开发者的青睐. ...
- html5画图论文结束语,基于HTML5 Canvas的画图板的设计与实现.doc
单片机论文_优秀毕业论文_毕业论文设计_毕业过关论文_毕业设计_毕业设计说明_毕业论文_单片机毕业论文_基于单片机毕业论文_毕业论文终稿_毕业论文初稿_毕业论文设计_单片机论文_本文档支持完整下载,支 ...
- 基于html5的在线教育,基于HTML5的在线学习系统的设计与实现
基于HTML5的在线学习系统的设计与实现 发布时间:2019-11-18所属分类:科技论文浏览:1次 摘 要: 摘 要: 在线课程学习网站的发展迅速,吸引了广大用户.基于 HTML5 的在线学习系统经 ...
最新文章
- winform动态的文字效果
- Dependency Walker PE模块依赖性分析工具
- linux下用dd命令拷贝硬盘黑屏,linux下用dd命令拷贝硬盘
- Security Wheel 安全环
- Spring的事务控制-基于注解的方式
- ant构建项目迁移到gradle_Gradle构建工具
- P7443-加边【博弈论】
- 使用Degraph管理软件包依赖关系
- 原 剑指offer(刷题11-20)--c++,Python版本
- ring0和ring3的区别
- mysql断言命令_mysql的触发模拟断言
- CSS3给页面打标签
- 目前为止最全的微信小程序项目实例
- 【opencv4】——fatal error: opencv2/opencv.hpp: No such file or directory #include <opencv2/opencv.hpp>
- usb调试与adb调试
- This experimental syntax requires enabling the parser plugin: ‘optionalChaining‘
- 数模论文格式小技巧(符号说明三线表)
- Android service 不被杀死“永不退出的服务”(双进程,服务,多进程,微信)
- 你为什么总是很忙碌,却还在原地踏步!
- 版权和商标权有什么关系?版权和商标的区别在哪里?
热门文章
- MAX_VALUE的最大值和最小值是多少
- Android2D绘图二
- oracle 最大值及其_学习笔记:Oracle优化 SQL查询最大值 最小值时的优化方法案例...
- 列式存储ClickHouse(二)接口
- 四脚轻触开关pcb封装_轻触开关的规格尺寸与型号选择
- android viewpager 详解,详解Android App中ViewPager使用PagerAdapter的方法
- ARCore-Unity3d教程2 - 基本概念
- [洪流学堂]Hololens开发高级篇5:空间映射(Spatial mapping)
- 在PostgreSQL中解码Django会话
- 准备用于AI人脸识别的数据集