湖南永州新闻,皇家赌场女主角,团购网123
基于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下载地址: 欢迎提供宝贵意见!
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Android Manifest中meta-data扩展元素数据的配置与获取方式
Android实现获取meta-data和build.gradle的值
Android获取清单文件中的meta-data,解决碰到数值为null的问题
解决webview 第二次调用loadUrl页面不刷新的问题
解决Android WebView拦截url,视频播放加载失败的问题
Android webview加载https链接错误或无响应的解决
网友评论