Angular.js通过自定义指令directive实现滑块滑动效果


Posted in Javascript onOctober 13, 2017

前言

最近因为工作需要让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现。

那么angular如何实现呢,我用的是自定义指令(directive)。

方法如下

1.下面是我html部分代码,detail-scroll是我自定义的标签

...............
<div id="time" style="position: relative;">
 <div ng-style="maskStyle" detail-scroll style="transition: all linear 0.5s;-moz-transition:all linear 0.5s;-webkit-transition: all linear 0.5s;-o-transition: all linear 0.5s;">
 <div ng-click="maskTimeDetail()">
  <i class="zmdi zmdi-zoom-in" style="font-size: 22px;color: #fff;padding: 5px;"></i>
 </div>
 </div>

<div class="tl-item alt" ng-repeat="time in timeList">



//.....................


</div> 
</div>

2.开始写js代码

这里假设我们在某一个module下,控制器叫做AppCtrl

angular.module('xxxx',[ ])
.controller('AppCtrl', ['$scope',AppCtrl])
.directive('detailScroll',function(){
// 返回一个函数
 return{
 link : function($scope,element,attr){
 var container = angular.element(window);
 var timeH = $('#time').offset().top;//获取该部分距离页面顶部距离
 container.on('scroll', function() {
 if(container.scrollTop()>timeH){
  $scope.maskStyle.top = container.scrollTop()-timeH+$('#time .alt').eq(0).height()/2+'px';
 }
 });
 },
 restrict:'A', //ECMA E元素 C类名 M注释 A属性
 };
});
function AppCtrl($scope) {
 //这是我给这个滑块定义的样式,一定要记住你要相对应你的父级元素相对定位,
 //因为我们要改变是它的top值
 $scope.maskStyle={
 width: '30px',height: '30px',
 'background-color': '#ea1c0d',
 'z-index': 999,
 position: 'absolute',
 top:0,left:0,
 opacity:'0.8',
 'text-align':'center'
 };
}

detailScroll是 angular命名规范,驼峰式,一定要这样写,angular只有用自定义指令,才可以用jquery的一些方法。。
以上只是个简单的例子来演示一下,如果滑块移动的top值不准确,可以自行计算。

这只是简单的自定义指令写法,还有一个是可以引入模板

 angular.module('app', [])

.directive('myDirective', function() {


function appCtrl($scope){



//处理逻辑


}


   return {



 restrict: 'EA',



 replace: true,


scope:{



//想要从父级controller传到这里的函数,对象,变量,分别用(&,=,@),具体怎么用大家可以参考angular官网详解


}


templateUrl:'路径或是html拼接的字符串',



 controller: function($scope, $element, $attrs, $transclude) { // 控制器逻辑 }


//controller这样写也可以,还有一种直接写controller名,通过注入的方法,比如


controller:['$scope',appCtrl]


} })

可以参考这个https://3water.com/article/107045.htm,很详细~~~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
捕获未处理的Promise错误方法
Oct 13 #Javascript
解决ie img标签内存泄漏的问题
Oct 13 #Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
vue2组件之select2调用的示例代码
Oct 12 #Javascript
vue2.x select2 指令封装详解
Oct 12 #Javascript
一个简易时钟效果js实现代码
Mar 25 #Javascript
微信小程序实现页面跳转传值的方法
Oct 12 #Javascript
You might like
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
php7 新增功能实例总结
2020/05/25 PHP
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
require.js的用法详解
2015/10/20 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
父亲追悼会答谢词
2014/01/17 职场文书
办公室岗位职责
2014/02/12 职场文书
40岁生日感言
2014/02/15 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
诚信考试主题班会
2015/08/17 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
检讨书怎么写?
2019/06/21 职场文书