成都网站建设设计

将想法与焦点和您一起共享

如何实现移动端IonicApp资讯上下循环滚动效果

这篇文章给大家分享的是有关如何实现移动端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 代码是这样的:

 
    
       
        {{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资讯上下循环滚动效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


    分享题目:如何实现移动端IonicApp资讯上下循环滚动效果
    文章转载:http://chengdu.cdxwcx.cn/article/jicchh.html

    其他资讯