dropload.js+anjular实现的无线下拉。。。。
来源：互联网 发布：yy挂机喊话软件 编辑：程序博客网 时间：2024/06/13 12:29
<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实现的无线下拉。。。。
- 利用dropload.min.js实现下拉分页
- dropload.js下拉加载应用
- dropload.js初始化的坑
- 文档dropload.js插件实现webApp网页上滑刷新下拉加载更多
- dropload.js
- 下拉刷新，上拉加载插件dropload.js使用总结
- bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
- anjular js 涉及的数据循环
- dropload.js实现下滑加载更多分页功能
- 5.12 JLL实习日志-实现Anjular Js 功能实现
- anjular.js初体验
- Asp.net+Xml+js实现无线级下拉菜单
- dropload.js无限刷新解决方案
- 移动端下拉刷新、上拉加载更多插件dropload的使用
- anjular 的service
- anjular.js表单验证实例
- anjular.js 表单验证实例
- jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码
- React-Native学习笔记之：实现简单地登录页面
- 在服务器上部署项目时Tomcat内存溢出
- JAVA程序员必看的15本书-JAVA自学书籍推荐
- 在Ubuntu16.10上开启docker17.03.0-ce的https认证
- dropload.js+anjular实现的无线下拉。。。。
- tpf 团队开发vs 多人签入后出现资源冲突
- 对象的作用域，对象方法扩展
- Android WebView的使用集锦（支持Html5）
- Linux下安装mysql
- div对齐实例以及注意事项
- RxJava操作符整理
- C++实验4-输出图形
- c++11并发指南。（转载）
