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: 定位的时候不同手机的浏 ...
随机推荐
- python的几个小程序
##九九乘法口诀 num1=1 while num1<10: num2=1 while num2<=num1: print(num2,"*",num1,"=& ...
- js中级小知识1
首先我们复习之前的小知识,本期博客与之前有关 js数据类型 基本数据类型:string undefined null boolean numbe ...
- ps把照片背景变成透明[原为白色或其他颜色]
在第六步:魔法棒选中之后,按delete键,即可!!! 注意:背景变成透明颜色,需要把照片格式变成png 就可以了!!!
- 完整java开发中JDBC连接数据库代码和步骤[申明:来源于网络]
完整java开发中JDBC连接数据库代码和步骤[申明:来源于网络] 地址:http://blog.csdn.net/qq_35101189/article/details/53729720?ref=m ...
- findStr
目录 规则 目录结构 src/main.cpp src/findstr.cpp include/findstr.h ft/TestCase.cpp ft/makefile ftbuild.sh mai ...
- webpack介绍 安装 常用命令
Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...
- Python3学习之路~5.11 configparser模块
用于生成和修改常见配置文档,当前模块的名称在 python 2.x 版本中为 ConfigParser, python 3.x 版本中变更为 configparser. 来看一个好多软件的常见文档格式 ...
- 源码安装Nginx以及用systemctl管理
一.源码安装Nginx: 先安装gcc编译器(安装过的可以忽略) [root@localhost ~]# yum -y install gcc gcc-c++ wget 进入src目录 [root@l ...
- linux查看cpu个数,线程数及cpu型号
1.查看CPU逻辑id grep 'physical id' /proc/cpuinfo | sort -u physical id : 0physical id : 1 2.查看物理CPU个数 $ ...
- c# Resolve SQlite Concurrency Exception Problem (Using Read-Write Lock)
This article describes the c# example to solve the problem of SQlite concurrent exception method. To ...