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 相关文章推荐
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
捕获未处理的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
php仿discuz分页效果代码
2008/10/02 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
PHP 文件上传限制问题
2019/09/01 PHP
javascript中的几个运算符
2007/06/29 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python numpy数组复制使用实例解析
2020/01/10 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
python中os包的用法
2020/06/01 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
2014年端午节活动方案
2014/03/11 职场文书
四年级评语大全
2014/04/21 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
法制教育观后感
2015/06/17 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
Django如何与Ajax交互
2021/04/29 Python
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python