angular之上滑换页指令
healthmallDirectives.directive("goodsTopRefresh", ['$window',function ($window) {
return {
link: function (scope,el,attrs) {
var wai = $window.document.getElementById("outerDiv");
var content = $window.document.getElementById("goodsnei")
wai.addEventListener("scroll", function (e) {
var waiHeight = wai.offsetHeight;
var contentHeight = content.offsetHeight;
var waiTop = wai.scrollTop;
if(waiTop+ waiHeight-40 >= contentHeight){
var startY;
var endY;
content.addEventListener("touchstart", function (e){
startY = e.changedTouches[0].pageY;
});
content.addEventListener("touchend", function (e){
endY= e.changedTouches[0].pageY;
if(startY -endY>=80){
scope.$apply(attrs.toptorefresh);
}
});
}
})
}
};
}]);
获得滚动页的大小和内容页大小,通过touchStart和touchEnd判断页面是否是上滑,若上滑则执行toptorefresh属性中的方法
angular之上滑换页指令的更多相关文章
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular使用操作事件指令ng-click传多个参数示例
本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="m ...
- ANGULAR 开发用户选择器指令
在开发表单时,我们需要使用经常需要使用到用户选择器,用户的数据一般使用如下方式存储: 用户1,用户2,用户3 我们可以使用angular指令实现选择器. <!DOCTYPE html> ...
- angular中的ng-bind-html指令和$sce服务
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...
- Angular.js之自定义指令学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- angular : direative :comunication 指令之间的通讯
在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...
- Angular回到顶部按钮指令
之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> < ...
- angular.js的ng-app 指令定义一个 AngularJS 应用程序。
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...
随机推荐
- Win10 磁盘占用 100% 有效解决办法
立即查看 任务管理器,看看是不是有一个 服务主机 unistack服务组或者找类似名称的,点开以后你会看到里面有同步主机 blablah请你毫不犹豫的结束它!结束它!结束它! 按下WIN+R调出运行, ...
- 第二章 Rest框架 Nancy
正如你看到的,Nancy有两个主要用途. 其中第一项是作为一种通用的基于 REST 框架,可替代 ASP.NET Web API 或其他Rest工具包. 默认情况下,Nancy提供一流的路由和内容协商 ...
- 字体大小和背景颜色修改--Android Studio
打开: File/seting/Editor/colors&Fonts/Fonts editor Font处默认的不让修改 所以先点击save as 随便点个名字 然后 size就可以修改了
- java时间类型操作
java中Date类型与字符串相互转化 Date date = new Date(); System.out.println(date); //DateFormat类为一个 ...
- JPA入门
JPA是什么 JPA全称Java Persistence API,是一组用于将数据存入数据库的类和方法的集合.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化 ...
- linux shell -常用脚本
题记:来源与网络和自己工作中总结.有些脚本片段,函数经常使用. 1.判断登录用户 1.1脚本 [devtac@test_1 shell]$ vi check_user.sh #! /bin/sh ec ...
- HTML5-本地存储与cookies
一.H5的几种存储形式 1.本地存储(localstorage和sessionstorage) 存储形式:key-->value 过期策略:localstorage永久存储,不过期,除非手动删除 ...
- 使select文本框可编辑可选择(jQuery插件)
最近做项目中用到了这个插件,正好分享下. 1. 需要用的js包点击下载,在项目中引入该js. <script src="${pageContext.request.contextPa ...
- powershell通过wps excel导出csv
powershell比较强大,比较好用,比较方便. $et=New-Object -ComObject et.application #$et.Visible=$true $et.DisplayAle ...
- Git的用法
Git的用法 Git 的也可以理解为版本控制器.版本控制器(维基的解释):维护工程蓝图的标准作法,能追踪工程蓝图从诞生一直到定案的过程.此外,版本控制也是一种软件工程技巧,借此能在软件开发的过程中,确 ...