<!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>
浙公网安备 33010602011771号