angular --- s3core移动端项目(三)
angular.module('myApp')
.directive('listActive',functon(){
return {
restrict:'A',
scope:{
listActive:‘@’
},
link:function(scope,element){
element.children().on('click',function(){
element.find('.'+scope.listActive).removeClass(scope.Active);
angular.element(this).addClass(scope.listActive)
})
}
}
})
.directive('iscrollWrapper',["$window",functon($window){
return {
restrict:'E',
transclude:true,
templateUrl:'templates/iscroll.tpl.html',
link:function(scope,element,attr){
var myScroll;
function createScroll(){
var ele = angular.element;
var pullUp = ele('#pullUp'),
pullUpLable = pullUp.find('.pullUpLable'),
pullUpIcon = pullUp.find('.pullUpIcon');
pullDown = ele('#pullDown'),
pullDownLable = pullDown.find('.pullDownLable'),
pullDownIcon = pullDown.find('.pullDownIcon');
scroller = ele('#scroller');
loadingStep = 0;
textFlag = 0;
pullDown.hide();
pullUp.hide();
//init
var wrapper = document.getElementById('.iscroll-wrapper');
if(wrapper){
myScroll = new IScroll(wrapper,{probeType:2,click:true});
}
//高度处理
var head = ele('.header')[0];
var foot = ele('.footer')[0];
var headerwrapper = ele('.wrapper-head')[0];
var height = $window.innerHeight - (head === undefined ? 0 :head.clientHeight) - (foot === undefined ? 0 :foot.clientHeight) - headerwrapper.clientHeight;
ele(wrapper).css('min-height',height);
function setCenter(jqobj){
var parent = jqobj.parent();
var width = parent.width();
var half = width/2;
var selfhalf = jqobj.width()/2;
jqobj.css('margin-left',half-selfhalf);
}
function setCenter(getAdv){
var adv= ['深度对接‘,'使用同步‘,'飞速价值','dsad...']
var index= Math.round(Math.random()*3);
return adv[index];
}
//滚动时
myScroll.on('scroll',function(){
if (textFlag == 0) {
pullDownLable.html(getAdv());
textFlag == 1;
}
if (loadingStep ==0 && !pullDown.attr('class').match('flip|loading') && !pullUp.attr('class').match('flip|loading')) {
if (this.y <20 && this.y>0) {
pullDown.hide()
}else if (this.y <40 && this.y>20) {
//显示字
pullDown.show();
setCenter(pullDownLable);
setCenter(pullDownIcon);
}else if (this.y>40) {
//下拉刷新效果
pullDown.show();
setCenter(pullDownLable);
setCenter(pullDownIcon);
myScroll.refresh();
pullDown.addClass('flip');
loadingStep = 1;
}else if (this.y <this.maxScrollY && this.y>(this.maxScrollY - 35)) {
pullDown.hide()
}else if (this.y<(this.maxScrollY - 35)) {
//下拉刷新效果
pullDown.show();
setCenter(pullDownLable);
setCenter(pullDownIcon);
myScroll.refresh();
pullDown.addClass('loading');
loadingStep = 1;
}
}
})
//滚动完毕
myScroll.on('scrollEnd',function(){
textFlag = 0;
if(loadingStep == 1){
if (pullUp.attr('class').match(flip|loading)) {
pullUp.removeClass('flip').addClass('loading');
pullUpAction();
}else if (pullDown.attr('class').match(flip|loading)) {
pullDown.addClass('loading');
pullDownAction();
}else{
pullDown.slideUp();
pullUp.hide();
}
}
});
//下拉刷新
function pullDownAction(){
pullDown.click();
setTimeout(function(){
pullDown.slideUp('slow');
pullDown.attr('class','');
ele(scroller).css('min-height',ele(wrapper).height()+1);
loadingStep = 0;
},500)
};
function pullUpAction(){
pullUp.click();
setTimeout(function(){
pullUp.slideUp('slow');
pullUp.attr('class','');
ele(scroller).css('min-height',ele(wrapper).height()+1);
loadingStep = 0;
},500)
};
wrapper.addEventListener('touchmove',function(e){e.preventDefault();},false);
return myScroll;
}
angular.element(document).ready(function(){
if(!myScroll){
var myScroll = cresteScroll();
scope.myScroll = myScroll;
}
})
}
}
}])
<div id='icroll-wrapper' ng-modal='myScroll'>
<div id='scroller'>
<div id='pullDown' ng-click='refreashPage()' class=''>
<span class='pullDownLable'></span>
<span class='pullDownIcon'></span>
</div>
<ul ng-translude ></ul>
<div id='pullUp' ng-click='loadMore()'>
<span class='pullUpLablepullUpIcon'></span>
<span class='pullUpLable'></span>
</div>
</div>
</div>
angular --- s3core移动端项目(三)的更多相关文章
- angular --- s3core移动端项目(二)
product-ctrl.js angular.modules('myApp').controller('ProductCtrl',['$scope','$rootScope','$timeout', ...
- angular --- s3core移动端项目
因为记性不好的原因做个草稿笔记 app.js中 var myApp = angular.module('myApp',['ui.router','oc.lazyLoad','ngAnimate','数 ...
- 【angularjs】使用ionic+angular 搭建移动端项目,字体适配
解析: 首先,rem是以html为基准. 一般的,各大主流浏览器的font-size默认值为16px,此时1rem=16px.如果此时将rem与px进行换算很麻烦,比如0.75rem=12px. 为了 ...
- 【angularjs】使用angular搭建PC端项目,开关按钮
方法一(使用指令) 1.指令(angular-ui-switch.js) angular.module('uiSwitch', []) app.directive('switch', function ...
- 采用apicloud开发移动端项目心得体会
作为第一批吃螃蟹的,来说一说apicloud做移动端项目的一些体会. 刚开始接到项目,需要移动端开发两个项目,公司人员里面没有一个会原生android或者ios开发的,目前能出的技术也就是web,后端 ...
- 使用Vue2+webpack+Es6快速开发一个移动端项目,封装属于自己的jsonpAPI和手势响应式组件
导语 最近看到不少使用vue制作的音乐播放器,挺好玩的,本来工作中也经常使用Vue,一起交流学习,好的话点个star哦 本项目特点如下 : 1. 原生js封装自己的跨域请求函数,支持promise调用 ...
- 在Tomcat下部属项目三种方式:
在Tomcat下部属项目三种方式: 1直接复制: 2. 通过配置虚拟路径的方式 直接修改配置文件 写到tomcat/conf/server.xml 找到<H ...
- 曾经的pc端项目踩到的一些兼容性的坑及其解决方案
曾经公司pc端项目一直最低兼容到IE7,要求和chrome下浏览效果一致,真心坑坏了我和另外一个小伙伴(另一个小伙伴以前也没处理过兼容问题).不过还好,在这里真心感谢鑫哥博客的详解,从底层原理讲到了具 ...
- Vue移动端项目总结
使用Vue项目写了一个移动端项目,然后又把项目硬生生的抽离了组件,一直忙着写RN项目没有时间总结心得,今天上午终于下定决心,写点总结. 1.position:absolute: 定位的时候不同手机的浏 ...
随机推荐
- hdu 1045
http://acm.hdu.edu.cn/showproblem.php?pid=1045 Fire Net Time Limit: 2000/1000 MS (Java/Others) Me ...
- Consul部署架构
Consul 使用 Raft 算法来保证一致性, 比复杂的 Paxos 算法更直接,用于实现分布式系统的服务发现与配置. 应用Consul提供的服务需要建立Consul集群.在Consul方案中,每个 ...
- python摸爬滚打之day26----网络编程之socket
1.网络通信原理 互联网的本质就是一系列的网络协议, 统称为互联网协议. 互联网协议的功能:定义计算机如何接入internet,以及接入internet的计算机通信的标准. 互联网协议按照功能不同分为 ...
- Cartographer源码阅读(4):Node和MapBuilder对象2
MapBuilder的成员变量sensor::Collator sensor_collator_; 再次阅读MapBuilder::AddTrajectoryBuilder方法.首先构造了mappin ...
- python 关于 input
name = input("请输入你的姓名:") print(name) 解释:input表示输入,当你输入一个名字的时候, 它打印出来的东西,也就是你输入的东西, 结果: 请输入 ...
- 使用PageHelper插件分页结合mybatis返回的列表个数不对问题解决
问题描述:spring mvc+mybatis项目中,当使用PageHelper插件进行分页查询时,查到的总数据量值是正确的,但是查询当前页返回的列表个数不对.比如每页查询10条,返回2条或者3条.r ...
- OpenStack-RabbitMQ-获取vm、磁盘、网络设备的状态变化
需求 及时知道vm,硬盘,镜像,网络设备.负载均衡器状态变化 分析 Dashboard中也是通过定时使用ajax调用API来获取虚拟机的状态信息的定时轮训的方式过于被动 解决方案 共用rabbitmq ...
- 学习使用scrapy itemspipeline过程
开始非常不理解from https://www.jianshu.com/p/18ec820fe706 找到了一个比较完整的借鉴,然后编写自己的煎蛋pipeline 首先在items里创建 image_ ...
- MySQL 5.6 (Win7 64位)下载、安装与配置图文教程
一. 工具 Win7 64位操作系统 二. 步骤 第一步:下载安装包 下载 地址:http://www.mysql.com/ 截止到目前(2016/7/24) ,官网的最新版本是5.7.13,不过自己 ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...