php怎么写评论折叠展开,简单实现Angular文字折叠展开效果

Angular文字折叠展开效果也是一种很有趣的功能,本文主要介绍了Angular文字折叠展开组件的原理分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。

自己写了个Angular的文字折叠组件,这种组件其实很多地方都能用到效果如下

展开后的效果

e08ff3abf315d391229479a78044fd4f.png

折叠后的效果

ddd1deb386572108eae10b73b8a0ed2a.png

先放全部代码,使用的时候只需要把自己需要展现的文字{{designer.des}}替换成自己所在路由器所需要绑定的数据即可

.directive('textfold', function() {

return {

restrict: 'EA',

template: '

' + '{{designer.des}}' + '
' + '{{isMore}}' + '

',

link: function(scope, element, attrs) {

var height;

var maxheight;

function textfold() {

height = angular.element('#textfold').height();

maxheight = angular.element('#textfold').height();

}

scope.$watch('designer.des', function(data) {

if (data) {

textfold();

}

})

var isExtend = true;

scope.isMore = "折叠";

scope.more = function() {

var minheight = 23;

if (isExtend) {

if (height >= minheight) {

document.getElementById('textfold').style.height = height + "px";

setTimeout(function() {

scope.more();

}, 1);

height -= 10;

} else {

scope.isMore = "查看更多...";

scope.$apply();

isExtend = !isExtend;

height += 10;

}

} else {

if (height <= maxheight) {

document.getElementById('textfold').style.height = height + "px";

setTimeout(function() {

scope.more();

}, 1);

height += 10;

} else {

scope.isMore = "折叠";

scope.$apply();

isExtend = !isExtend;

height -= 10;

}

}

}

}

}

})

下面我一句句的分析这个组件的思路

首先肯定是定义好Angular该组件化的模板和使用模式

restrict: 'EA',

template: '

' + '{{designer.des}}' + '
' + '{{isMore}}' + '

',

EA为,使用元素和属性的方法都可以在DOM里面展现这个插件,既我可以这样 也可以这样

var height;

var maxheight;

这两个变量一个是此时折叠完后的高度(这个是在展开变成折叠的过程中不断发生变化的,最后折叠后就是等于minheight),一个文字完全展开时候获取的高度

function textfold() {

height = angular.element('#textfold').height();

maxheight = angular.element('#textfold').height();

}

scope.$watch('designer.des', function(data) {

if (data) {

textfold();

scope.more();

}

})

这两句其实很重要的,当我们获取文字的高度时候,是必须要捕获文字的变化(文字完全渲染后的高度),所以我们用scope.$watch来捕获designer.des的变化,当data不为空,即文字已渲染后

if (data) {

textfold();

}

再去执行回调函数textfold来获取当前文字的高度,暂时试过这种方法可以获取到文字渲染后的高度

如果顺序执行而不是回调执行

angular.element('#textfold').height()

只会拿到span标签的默认高度而已

这里还可以添加个小技巧,增加一句scope.more();

if (data) {

textfold();

scope.more();

}

这样就可以让它页面渲染完后先展开,然后再折叠,那么我们就在进来页面的时候默认是折叠的状态了,在程序里面,写这种效果,一般是先让它文字展开获取到高度再返回成折叠状态,来达到进来页面就是折叠的文字状态效果

var isExtend = true;这句是让下面的scope.more进入第一个分支折叠状态

setTimeout(function() {

scope.more();

}, 1);

这句是一句递归,其实就相当于实现jQuery的animate的文字框伸缩动画,只是这里用了一个递归来实现不断进来判断状态从而改变height值

然后通过改变scope.isMore改变它是查看更多…还是折叠

由于这里是用DOM操作

document.getElementById('textfold').style.height = height + "px";

下面这里最好加多一句

scope.$apply();

来获取DOM的变化

其实大概思路就是很简单的,其他一些地方也是很容易理解,大家可以动手尝试一下。

相关推荐:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值