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: 定位的时候不同手机的浏 ...
随机推荐
- ArrayList 的代码
public class user { private String userName; //类的构造方法 public user (String userName ){ this.userName= ...
- 个人小爱好:Operating System:three easy pieces---第6章第4节_担心并发问题?
担心并发问题? 微妙,上下文切换大约6微妙.而,现在的系统有着级数级别的提升,在2-3GHz的处理起中消耗只有亚微妙级. 但应该注意到,不是所有的系统性能都跟着CPU性能的提升而提升,根据Ouster ...
- 【摘】Fiddler工具使用介绍
摘自:https://www.cnblogs.com/miantest/p/7289694.html Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作 ...
- Elasticsearch学习笔记(四)ElasticSearch分布式机制
一.Elasticsearch对复杂分布式机制透明的隐藏特性 1.分片机制: (1)index包含多个shard,每个shard都是一个最小工作单元,承载部分数据,lucene实例,完整的建立索引和处 ...
- 15.3-uC/OS-III资源管理(多值信号量)
多值信号量是 uC/OS 操作系统的一个内核对象, 主要用于标志事件的发生和共享资源管理. 1.如果想要使用多值信号量,就必须事先使能多值信号量. 多值信号量的使能位于“os_cfg.h”. 2.OS ...
- python练习题-day11
1.编写装饰器,为多个函数加上认证的功能(用户的账号密码来源于文件), 要求:登录成功一次,后续的函数都无需再输入用户名和密码 flag=False def wrapper(fun): def inn ...
- WIN7无法访问共享打印机及文件的解决办法
故障: 在网上邻居上能看到对方的电脑名字,双击进入的时候弹出问题.出现“用户账户限制”或“未授予用户在计算机上的请求登陆类型”的问题,这说明我们的局域网和网络是畅通的,问题的根源就在电脑的安全设置上. ...
- python框架之Flask(6)-flask-sqlalchemy&flask-script&flask-migrate使用
整合SQLAlchemy 安装 pip3 install flask-sqlalchemy 简单使用 from flask import Flask from flask_sqlalchemy imp ...
- 强迫症犯了,忍不住赞一下slf4j包Logger.java的优雅代码
如下是slf4j-api包下的Logger接口类里其中几个方法的声明: package org.slf4j; public interface Logger { /** * Log a message ...
- ORA-00907: 缺失右括号,原因及解决办法整理
ORA-00907: 缺失右括号,原因及解决办法整理 1 union all中order by 导致缺失右括号 在有union all的子查询中使用了order by,会导致缺失右括号的错误,事实上在 ...