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: 定位的时候不同手机的浏 ...
随机推荐
- PAT甲级1068 Find More Coins【01背包】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805402305150976 题意: n个硬币,每一个有一个特有的价 ...
- ext 的loadmask 与ajax的同步请求水火不容
由于ajax 的同步请求会有一段请求时间.有的短.有的长,对于短的我们还是能接受的,不过长的话就必须处理一下了, 就比如处于ext 4.2.0的框架下,需要一个遮掩的样式,框架是有自带的,loadma ...
- Android studio中导入SlidingMenu问题
我们导入的library文件夹中的build.gradle 文件里面写的很清楚: android { compileSdkVersion 17 buildToolsVersion &q ...
- js篇-判断数组对象中是否含有某个值,并返回该条数据
项目背景需求是: 已知: var a=[{name:'jenny',age:18},{name:'john',age:19},{name:'jack',age:20}] var b ='jenny' ...
- python基础之 列表,元组,字典
other help(str.strip) #查看是否有返回值以及返回值类型[] :称为索引操作符 1.列表 列表相比字符串来说能存储大量数据的python的基本数据类型,并且也拥有字符串的一些方法( ...
- JMeter上架标的(yyb-csg)
yyb-csg 1.登录时一直提示用户名不能为空,可是明明已经传值了呀 解决:添加cookie管理器 2.怎么获取到待受理的项目, 在python脚本的实现过程中发现,在平台受理一步中传的lid值就是 ...
- pycharm中代码整体缩进
整体缩进 : 1.选中需要缩进的代码 2.Tab键 反向缩进: shift+Tab
- AppFabric查询工作流实例
安装 通过IIS查询工作流实例,可以操作挂起,首先打开WF+WCF的站点: 这里可以搜索工作流实例:例如根据工作流ID.创建日期.状态等查询 下方的搜索结果可以查看结果 资源 Windows Serv ...
- ASP.NET Core 之 Identity
Claims:声明(证件单元)Identity:身份Principal:当事人Authentication :认证Authorization:授权 http://www.cnblogs.com/sav ...
- python_函数式编程
函数式编程是一种编程范式 (而面向过程编程和面向对象编程也都是编程范式).在面向过程编程中,我们见到过函数(function):在面向对象编程中,我们见过对象(object).函数和对象的根本目的是以 ...