<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link href="../../zixun/css/news.css" type="text/css" rel="stylesheet">
<link href="../../zixun/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../zixun/js/self-adaption.js"></script>
<script src="../../lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<title>大众体育</title>
</head>
<body ng-app="myApp" ng-controller="customersCtrl" >
<div class="input-group">
<input type="text" ng-model="title" class="form-control input-lg">
<span ng-click="searchNews({type:0,title:''})" class="input-group-addon btn" style="background:#38d1fd;color:#fff;">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<div class="container-fluid">
<table id="tab">
<tr>
<th ng-click="searchNews({type:0,title:''})" class="fli"><p>首页</p></th>
<th ng-click="searchNews({type:1,title:''})"><p>足球</p></th>
<th ng-click="searchNews({type:2,title:''})" ><p>篮球</p></th>
<th ng-click="searchNews({type:3,title:''})"><p>乒乓</p></th>
<th ng-click="searchNews({type:4,title:''})"><p>休闲</p></th>
<th ng-click="searchNews({type:5,title:''})"><p>其他</p></th>
<th ng-click="searchNews({type:6,title:''})"><p>更多</p></th>
</tr>
</table>
</div>
<div>
<div class="container content" ng-repeat="x in names" ng-hide="list">
<div class="row" style="height: 30px !important" ng-if="x.style == 0" ng-click="showOne(x.newsid)" >
<div class="col-xs-8" style="padding:0;">
<h3 style="font-size:.28rem;font-weight:300;" >{{ x.title }}</h3>
<div class="icon">
<span class="Location"><p class="glyphicon glyphicon-map-marker"></p><format>{{ x.city }}</format></span>
<span class="Browse" ><p class="glyphicon glyphicon-eye-open"></p><format>118</format></span>
<span>2017年2月14日</span>
</div>
</div>
<a href="newsDetail.html"> <div class="col-xs-4 normal">
<img style="width:100%;" src="../../zixun/images/4@2x.png">
<i class="ftype video"> <span class="glyphicon glyphicon-play"></span> <span>00:28</span> </i>
</div></a>
</div>
<div class="row" ng-if="x.style == 1" ng-click="showOne(x.newsid)">
<div class="col-xs-12">
<h3 style="font-size:.28rem; font-weight:300; margin:0;">{{ x.title }}</h3>
</div>
<ul class="col-xs-12 item">
<li class="col-xs-4">
<img src="../../zixun/images/1@2x.png"/>
</li>
<li class="col-xs-4">
<img src="../../zixun/images/2@2x.png" />
</li>
<li class="col-xs-4">
<img src="../../zixun/images/3@2x.png" />
</li>
</ul>
<div class="icon">
<span class="Location"><p class="glyphicon glyphicon-map-marker"></p><format>{{ x.city }}</format></span>
<span class="Browse" ><p class="glyphicon glyphicon-eye-open"></p><format>118</format></span>
<span>2017年2月14日</span>
</div>
</div>
<div class="row" ng-if="x.style == 2" ng-click="showOne(x.newsid)">
<div class="col-xs-4">
<img style="width:100%;" src="../../zixun/images/4@2x.png">
</div>
<div class="col-xs-8" style="padding:0;">
<h3 style="font-size:.28rem;font-weight:300;">苏州市吴江盛泽千人网球助力健身日"</h3>
<div class="icon">
<span class="Location"><p class="glyphicon glyphicon-map-marker"></p><format>苏州</format></span>
<span class="Browse" ><p class="glyphicon glyphicon-eye-open"></p><format>118</format></span>
<span>2017年2月14日</span>
</div>
</div>
</div>
<div class="row" ng-if="x.style == 3" ng-click="showOne(x.newsid)">
<div class="col-xs-12">
<h3 style="font-size:.28rem;font-weight:300; margin:0;">苏州市吴江盛泽千人网球助力"全民健身日"</h3>
</div>
<div class="col-xs-12 item">
<p class="normal"> <img src="../../zixun/images/pic.png">
<i class="ftype video"> <span class="glyphicon glyphicon-play"></span> <span>00:28</span> </i>
<i class="ftype1 video"> <span class="glyphicon glyphicon-play"></span> </i>
</p>
</div>
<div class="icon">
<span class="Location"><p class="glyphicon glyphicon-map-marker"></p><format>苏州</format></span>
<span class="Browse" ><p class="glyphicon glyphicon-eye-open"></p><format>118</format></span>
<span>2017年2月14日</span>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='/resources/lib/jquery-1.12.4.min.js'></script>
<script type='text/javascript' src='/resources/js/dropload.js'></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script src="../../js/angular-sanitize.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngSanitize']);
app.controller('customersCtrl', function($scope, $http,$sce) {
$scope.names = [];
var hght=0;//初始化滚动条总长
var curTop=0;//初始化滚动条的当前位置
var pageNo = 1;
var cs={"type":0,"title":"","pageNo":pageNo}
$http.post("/api/news/list").success(
function (response) {
for(var i=0;i<response.results.length;i++){
$scope.names.push(response.results[i]);
}
});
$scope.showOne = function(id){
var opts = {'id':id};
window.location.href = "newsDetail.html?id="+id;
};
$scope.searchNews = function(obj){
cs.title = $scope.title;
cs.type = obj.type;
if(!cs.title){
cs.title = "";
}
$http.post("/api/news/list?type="+cs.type+"&title="+cs.title).success(
function (response) {
$scope.names.splice(0,$scope.names.length);
for(var i=0;i<response.results.length;i++){
$scope.names.push(response.results[i]);
}
});
};
$(function(){
// dropload
$('.content').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
domUpdate : '<div class="dropload-update">↑释放更新-自定义内容</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
domNoData : '<div class="dropload-noData">暂无数据-自定义内容</div>'
},
loadUpFn : function(me){
$http.post("/api/news/list?type="+cs.type+"&title="+cs.title).success(
function (response) {
// $scope.names.splice(0,$scope.names.length);
for(var i=0;i<response.results.length;i++){
$scope.names.push(response.results[i]);
}
// 为了测试,延迟1秒加载
setTimeout(function(){
// 每次数据加载完,必须重置
me.resetload();
// 重置页数,重新获取loadDownFn的数据
page = 0;
// 解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
},300);
});
},
loadDownFn : function(me){
pageNo++;
// 拼接HTML
var result = '';
$http.post("/api/news/list?type="+cs.type+"&title="+cs.title+"&pageNo="+pageNo).success(
function (response) {
// $scope.names.splice(0,$scope.names.length);
for(var i=0;i<response.results.length;i++){
$scope.names.push(response.results[i]);
}
// 为了测试,延迟1秒加载
setTimeout(function(){
// 每次数据加载完,必须重置
me.resetload();
// 重置页数,重新获取loadDownFn的数据
page = 0;
// 解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
},100);
});
},
threshold : 50
});
});
});
</script>
<script type="text/javascript">
</script>
</body>
</html>
dropload.js+anjular实现的无线下拉。。。。
最新推荐文章于 2022-10-26 16:22:06 发布