<!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> <div class="mui-content"> <div id="refreshContainer" class="mui-scroll-wrapper" style="top: 50px;"> <div class="mui-scroll"> <div>house</div> <div class="mui-slider" style="margin-top: 50px;"> <div class="mui-slider-group"> <!--第一个内容区容器--> <div class="mui-slider-item" style="width: 200px;"> <!-- 具体内容 --><img src="../images/househome.png" height="120px"> <p style="margin-left: 10px;">All rental housing</p> </div> <!--第二个内容区--> <div class="mui-slider-item" style="width: 200px;"> <!-- 具体内容 --><img src="../images/househome.png" height="120px"> All rental housing </div> <div class="mui-slider-item" style="width: 200px;"> <!-- 具体内容 --><img src="../images/househome.png" height="120px"> All rental housing </div> <div class="mui-slider-item" style="width: 200px;"> <!-- 具体内容 --><img src="../images/househome.png" height="120px"> All rental housing </div> </div> </div> <div>job</div> <div class="mui-slider" style="margin-top: 50px;"> <div class="mui-slider-group"> <!--第一个内容区容器--> <div class="mui-slider-item" style="width: 200px;"> <!-- 具体内容 --><img src="../images/househome.png" height="120px"> <p style="margin-left: 10px;">All rental housing</p> </div> <!--第二个内容区--> <div class="mui-slider-item" style="width: 200px;"> <!-- 具体内容 --><img src="../images/househome.png" height="120px"> All rental housing </div> <div class="mui-slider-item" style="width: 200px;"> <!-- 具体内容 --><img src="../images/househome.png" height="120px"> All rental housing </div> <div class="mui-slider-item" style="width: 200px;"> <!-- 具体内容 --><img src="../images/househome.png" height="120px"> All rental housing </div> </div> </div> <div><h3>News</h3></div> <ul id="news" class="mui-table-view"><!--热映列表--> <!--v-for循环遍标题 赋给列表--> <!--tap-获取点击事件，通过open_detail函数将整个item信息传递过去--> <li class="mui-table-view-cell" v-for="item in news" @click="open_result(item)"> <!--<h3>{{item.community}}</h3>--> <!--<img src="../images/house_07.png" width="90%" height="80px">--> <img class="item-img" style="width: 100%;" :src="item.images" /><!--图片:src="item.url?item.url:require(\'img/default.png\')"--> <div class="mui-ellipsis dark-big"><!--标题-用啷个大括号抱起来--> <span class="mui-badge mui-badge-danger">标题：{{item.title}}</span> <span class="mui-badge mui-badge-danger">介绍：{{item.detial}}</span> </div> </li> </ul> </div> </div> </div> <script src="../js/mui.min.js"></script> <script src="../js/url.js"></script> <script src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/vue.min.js" ></script> <script type="text/javascript"> mui.init(); //初始化手动scroll控件 mui(\'.mui-scroll-wrapper\').scroll({ indicators:false //关闭进度条 }); var data_news = new Vue({ el:\'#news\', data:{ news:[] }, //点击历史纪录跳转事件 methods:{ open_result:function(item){ mui.openWindow({ id:\'newsdata\', url:\'newsdata.html\', extras:{ id:item.id, detial:item.detial, title:item.title, images:item.images } }); } } }); mui.init({ swipeBack: true, //启用右滑关闭功能 pullRefresh: {//下拉刷新-上拉加载初始化 container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 down: { auto: false, //可选,默认false.首次加载自动下拉刷新一次 callback: refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； }, up: { height: 50, //可选.默认50.触发上拉加载拖动距离 auto: true, //可选,默认false.自动上拉加载一次 contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore: \'没有更多数据了\', //可选，请求完毕若没有更多数据时显示的提醒内容； callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } } }); var pagenum=1; //刷新数据，重新调用接口 function refreshData() { var pagenum=1; mui.ajax(url+"/front_get_advertisment.do?page_num=" + pagenum, { type: "GET", async:false, dataType: "jsonp", success: function(data) { console.log("成功"); var json_data = jQuery.parseJSON(data); console.log(json_data.flag); data_news.news.splice(0,data_news.news.length); data_news.news=data_news.news.concat(json_data.list); mui(\'#refreshContainer\').pullRefresh().endPulldownToRefresh();//结束下拉刷新的现象 mui(\'#refreshContainer\').pullRefresh().refresh(true);//重置上拉加载控件 }, error: function(xhr, type, errorThrown) { //异常处理； mui.toast("查询失败-暂时无法访问"); } }); } var pagenum=1; //请求下一页数据 function loadMoreData(){ mui.ajax(url+"/front_get_advertisment.do?page_num=" + pagenum, { type: "GET", async:false, dataType: "jsonp", success: function(data) { pagenum++; console.log("成功2"); var json_data = jQuery.parseJSON(data); data_news.news=data_news.news.concat(convert(json_data.list)); //console.log(data_news.news[0].images); if(!json_data.lastpage){ mui(\'#refreshContainer\').pullRefresh().endPullupToRefresh(false); }else{ mui(\'#refreshContainer\').pullRefresh().endPullupToRefresh(true); } }, error: function(xhr, type, errorThrown) { mui(\'#refreshContainer\').pullRefresh().endPullupToRefresh(); //异常处理； mui.toast("查询失败-暂时无法访问"); } }); } function convert(items) { var newItems = [];//建立数组 //遍历items items.forEach(function(item) { newItems.push({//保存 id: item.id, title: item.title, detial:item.detial, images:url+\'/\'+item.url }); }); return newItems; } </script> </body> </html>