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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
vue如何清除浏览器历史栈
May 25 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实现网上点歌(二)
2006/10/09 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
如何解决安装python3.6.1失败
2020/07/01 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
介绍一下write命令
2012/09/24 面试题
教师求职自荐信
2014/03/09 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2019公司管理制度
2019/04/19 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书