<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/mui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<style>
body{
background: #fff;
}
#nav-w{
overflow: hidden;
background: #F23D44 !important;
color:#fff;
}
#sliderSegmentedControl{
width:90%;
}
#nav-w .mui-scroll .mui-control-item{
padding: 0px 10px;
font-size:13px;
}
#nav-w .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
color:#fff;
font-size:14px;
}
#right-icon{
display: inline-block;
width:10%;
height:38px;
line-height: 38px;
text-align: center;
}
#right-icon span{
line-height: 38px;
width: 50%;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div id="scrollarea" style="overflow: hidden;" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div style="position:absolute;top:0px; height: 40px;">
<a class="mui-control-item mui-active">
推荐
</a>
<a>
热点
</a>
<a>
北京
</a>
<a>
社会
</a>
<a>
娱乐
</a>
<a>
科技
</a>
</div>
</div>
<!--下拉刷新容器-->
<div id="pullrefresh">
<div class="">
<!-- 主界面具体展示内容 -->
<ul id="newslist"></ul>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
//sc.style.transform ="translate3d(0px, 0px, 0px) translateZ(0px)";
//sc.style.zIndex=1;
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
mui('#scrollarea').scroll();
//mui('#scroll').scroll().scrollTo(0,0,100);//100毫秒滚动到顶
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function () {
mui.ajax('http://172.16.1.116:8081/api/appinterface/getjson.ashx?action=pqlist&cbiao=dzpkhxx&ctitle=一片区&pageindex=1&pagesize=10', {
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function (data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
if (data.code == 0) {
jQuery("#newslist").html("");
//console.log(count+'---'+data.rows);
jQuery.each(data.data, function (i, o) { //v是json数组
var str = "";
var str = '<li id="news' + o.KeyId + '" class="mui-table-view-cell mui-media">';
if (o.xjfhzfqk == "") {
str = str + '<img class="mui-media-object mui-pull-right" src="images/default.png">';
} else {
var gg = o.xjfhzfqk.split(";");
str = str + '<img class="mui-media-object mui-pull-right" src="' + gg[0] + '">';
}
str = str + '<div>' + o.pkh + '————基本情况';
str = str + '<p>村小组：' + o.addr + ' 挂钩联系人：' + o.gglxr + '</p>';
str = str + '</div>';
str = str + '</li>';
str = str + '';
jQuery("#newslist").append(str);
})
} else {
mui.alert("请检查网络是否连通！");
}
},
error: function (xhr, type, errorThrown) {
//异常处理；
//console.log(type);
mui.alert("请检查网络是否连通！");
}
});
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
++count;
setTimeout(function () {
mui.ajax('http://172.16.1.116:8081/api/appinterface/getjson.ashx?action=pqlist&cbiao=dzpkhxx&ctitle=一片区&pageindex=' + count + '&pagesize=10', {
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function (data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
if (data.code == 0) {
//console.log(count+'---'+data.rows);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((count > data.rows)); //参数为true代表没有更多数据了。
jQuery.each(data.data, function (i, o) { //v是json数组
var str = "";
var str = '<li id="news' + o.KeyId + '" class="mui-table-view-cell mui-media">';
if (o.xjfhzfqk == "") {
str = str + '<img class="mui-media-object mui-pull-right" src="images/default.png">';
} else {
var gg = o.xjfhzfqk.split(";");
str = str + '<img class="mui-media-object mui-pull-right" src="' + gg[0] + '">';
}
str = str + '<div>' + o.pkh + '————基本情况';
str = str + '<p>村小组：' + o.addr + ' 挂钩联系人：' + o.gglxr + '</p>';
str = str + '</div>';
str = str + '</li>';
str = str + '';
jQuery("#newslist").append(str);
})
} else {
mui('#pullrefresh').pullRefresh().endPullupToRefresh(2 > 1);
}
},
error: function (xhr, type, errorThrown) {
//异常处理；
//console.log(type);
mui.alert("请检查网络是否连通！");
--count;
}
});
}, 1500);
}
if (mui.os.plus) {
mui.plusReady(function () {
setTimeout(function () {
//mui('#scrollarea').scroll();
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function () {
//mui('#scrollarea').scroll();
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
mui('#newslist').on('tap', 'li', function (e) {
var dtid = jQuery(this).attr("id"); //这个是包含news1212
dtid = dtid.replace('news', ''); //把news 替换掉
var vNextPage = null;
//获得下一个页面,自定义事件传值
if (vNextPage == null) {
vNextPage = plus.webview.getWebviewById('news-content');//下一个页面ID
if (vNextPage != null) {
//触发下一个页面自定义事件
mui.fire(vNextPage, 'DIY_DATA', {
dtid: dtid
})
}
}
mui.openWindow({
url: 'pianqu-show.html',
id: 'pianqu-show.html',
show: {
aniShow: 'pop-in'
},
extras: {
dtid: dtid
},
waiting: { autoShow: true }
});
//console.log(plus.webview.currentWebview().id);
})
</script>
</body>
</html>Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
