如何实现移动端IonicApp资讯上下循环滚动效果-创新互联

这篇文章给大家分享的是有关如何实现移动端Ionic App资讯上下循环滚动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站-专业网站定制、快速模板网站建设、高性价比裕安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式裕安网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖裕安地区。费用合理售后完善,10余年实体公司更值得信赖。

这里借助了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 代码是这样的:

 
    
       
        {{item.title.length <= 19 ? item.title : item.title.slice(0, 19) + '...'}}

                
  •            {{item1.title.length <= 19 ? item1.title : item1.title.slice(0, 19) + '...'}}

            
  •       

    这里对文字做了简单的处理,字符串超过19,会以“...”的形式显示。

    Css 样式表是这样的:

     .news-right { 
      position: absolute; 
      height: 40px; 
      left: 100px; 
      top: 10px; 
      right: 0; 
      color: rgb(65, 65, 65); 
      overflow: hidden; 
    }  
    .news-right ul{ 
      width: 100%; 
      position: absolute; 
      top: 0; 
      left: 0; 
    } 
    .news-right p { 
      padding: 0; 
      line-height: 15px; 
      text-overflow: ellipsis; 
      box-sizing: border-box; 
      white-space: nowrap; 
      font-size: 13px; 
    }

    感谢各位的阅读!关于“如何实现移动端Ionic App资讯上下循环滚动效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    文章标题:如何实现移动端IonicApp资讯上下循环滚动效果-创新互联
    文章URL:http://scyanting.com/article/coshie.html

    其他资讯