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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
js弹出对话框方式小结
Nov 17 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 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
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
PHP实现的简单日历类
2014/11/29 PHP
php文件读取方法实例分析
2015/06/20 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python实现微信防撤回神器
2019/04/29 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python将时分秒转换成秒的实例
2019/12/07 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
校长岗位职责
2013/11/26 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
捐赠仪式主持词
2014/03/19 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL