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中文分词库——pynlpir
安装 pip install pynlpir import pynlpir #加载包 pynlpir.open() #加载nlpir的库,这步是必须的 #否则会出现 段错误/段转储 segment f ...
- vue-router 进阶
简单回顾一下vue基础部分 动态路由匹配 路由配置方法 export default new Router({ routes: [ { path: '/router01/:name', name: ' ...
- js的简单介绍
1.js的介绍 js全称叫javascript,但不是java,他是一门前台语言,而java是后台语言. js的作者是布兰登艾奇. 前台语言:运行在客户端的 后台语言:跟数据库有关的. 2.能干什么? ...
- freertos 建立任务超过几个后系统不能能运行
/* *** NOTE *********************************************************** If you find your application ...
- 简单的可以跑起来的dubbo例子
原文地址:https://blog.csdn.net/jingyangV587/article/details/78901937 项目结构: maven项目,内部三个module. <?xml ...
- Centos7.1环境下搭建BugFree
环境准备: 系统 配置 IP Centos7.1 1核2G+60GB硬盘 10.10.28.204 1. 安装apache yum install httpd 2. 安装mysql yum inst ...
- ios dispatch_async使用
一般这样使用: dispatch_async(dispatch_get_global_queue(0, 0),^{ //进入另一个线程 dispatch_async(dispatch_get_main ...
- 家庭记账本之微信小程序(七)
最后成果 在经过对微信小程序的简单学习后,对于微信小程序也稍有理解,在浏览学习过别人的东西后自己也制作了一个,觉得就是有点low,在今后的学习中会继续完善这个微信小程序 //index.js //获取 ...
- cocos中FPS数值的含义
在cocos2d-x 2.x ,大家都看到了左下角的FPS变成3行,多了两行数据. 1.最上面一行是指的当前场景的渲染批次.(简单理解为需要渲染多少个贴图出来) 2.中间一行是渲染每一帧需要的时间. ...
- Java基础(认识Java)
我们要学习Java那么就要首先认识一下Java: Java是什么 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James ...