扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关如何实现移动端Ionic App资讯上下循环滚动效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
这里借助了jQuery库的选择器和动画函数，并且把jquery的操作封装到指令里。先看指令代码：
angular.module('starter')
.directive('slideScroll', function ($window, $timeout) {
return {
restrict: 'AE',
link: function (scope, element, attr) {
var _scrollHeight = 40;
var _newsLen = 3;
var index = 0;
setInterval(function () {
index += 1;
if (index > _newsLen) {
index = 0;
$(".news-right ul").css({
top: 0
})
} else {
$(".news-right ul").animate({
top: -_scrollHeight * index - 10 * index
}, 500);
}
}, 2000)
}
};
});滚动的高度scrollHeight设置为40px，三组文字newsLen循环，每组两行文字。每隔2000ms，ul列表向上移动固定距离，top值为（_scrollHeight + 10）* index 的长度。
Html 代码是这样的：