移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)

在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 代码是这样的：

<div class="news-right" ui-sref="newsList">
   <ul slide-scroll>
      <li class="news-box" ng-repeat="row in dataArr">
        <p ng-repeat="item in row">{{item.title.length <= 19 ? item.title : item.title.slice(0, 19) + '...'}}</p>
      </li>
      <li>
         <p ng-repeat="item1 in dataArr[0]">{{item1.title.length <= 19 ? item1.title : item1.title.slice(0, 19) + '...'}}</p>
      </li>
   </ul>
</div>

这里对文字做了简单的处理，字符串超过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 资讯上下循环滚动的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Ionic如何创建APP项目

    Ionic如何创建APP项目

    前面的章节中我们已经学会了ionic 框架如何导入到项目中. 接下来我们将为大家介绍如何创建一个 ionic APP 应用. ionic 创建 APP 使用 HTML.CSS 和 Javascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如下: 大家按照步骤在自己的编辑器上来认真的完成这个APP的创建吧. <!DOCTYPE html> <html> <head> <meta charset="ut

  • angular+ionic 的app上拉加载更新数据实现方法

    第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释, ng-if  值 布尔型,如果为true,则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可

  • ionic App 解决android端在真机上tab处于顶部的问题

    ionic App 解决android端在真机上 tab处于顶部的Bug 在app.js 页面中添加以下代码 .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.position('bottom'); $i

  • Ionic2创建App启动页左右滑动欢迎界面

    Ionic2创建App启动页左右滑动欢迎界面

    摘要: 每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy! 效果如下 本文例子和上图稍有不同,主要功能如下: 每滑动一下展示一张全屏图片: 滑动到最后一页才出现启动按钮: 欢迎界面只在第一次安装启动时出现. 下面就让我们一步一步实现这个功能: 1.创建应用: 使用Ionic2创建应用非常简单,只需在V1的命令后跟上--v2即可,如下: ionic start ionic2-welcome

  • 移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)

    在ionic App中遇到一个文字上下循环滚动的效果实现,网上查了之后才知道有个通俗的名字-跑马灯. 这里借助了jQuery库的选择器和动画函数,并且把jquery的操作封装到指令里.先看指令代码: angular.module('starter') .directive('slideScroll', function ($window, $timeout) { return { restrict: 'AE', link: function (scope, element, attr) { va

  • ElementUI table无缝循环滚动的示例代码

    ElementUI table无缝循环滚动的示例代码

    恰好实习的时候遇到了这个需求,而且网上的代码有点僵硬,所以我改了改,顺手水一篇博客出来. 部分思路来源:https://blog.csdn.net/qq_38543537/article/details/122842943 但是来源的代码,在滚动到底部时会有非常生硬的切换,我这里改了一些代码,让它的滚动变得流畅. 效果: 代码: HTML: <el-table ref="table" :data="TableData" stripe style="w

  • 使用ionic在首页新闻中应用到的跑马灯效果的实现方法

    使用ionic在首页新闻中应用到的跑马灯效果的实现方法

    在app中经常会有滚动的跑马灯效果的运用,如图所示为跑马灯效果: 代码如下: html: <div class="shouRight"> <ul class="slideTopbox" slide-scroll style="top:0px;"> <li><a href="#" rel="external nofollow" rel="external n

  • vue实现图片滚动的示例代码(类似走马灯效果)

    上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde

  • Android自定义textview实现竖直滚动跑马灯效果

    本文实例为大家分享了Android自定义textview实现跑马灯效果的具体代码,供大家参考,具体内容如下 xml布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.c

  • vue实现列表无缝循环滚动

    vue实现列表无缝循环滚动

    本文实例为大家分享了vue实现列表无缝循环滚动的具体代码,供大家参考,具体内容如下 功能介绍: 在PC端网页,包括大数据.官网.后台管理平台开发中,可能会用到这种列表循环滚动的展示. 大致需求: 1.列表可以使用数组循环遍历:2.每隔几秒中列表数据向上滚动一定距离,展示下一条数据:3.滚动到最后一条数据时重新显示第一条开始的数据(类似走马灯.banner图的循环效果): 整体思路: 1.使用两个定时器嵌套实现:2.需要两个相同容器存放同样内容,实现无缝衔接效果: 效果展示: 完整代码: <!DO

  • Android使用Recyclerview实现图片水平自动循环滚动效果

    Android使用Recyclerview实现图片水平自动循环滚动效果

    简介: 本篇博客主要介绍的是如何使用RecyclerView实现图片水平方向自动循环(跑马灯效果) 效果图:  思路: 1.准备m张图片 1.使用Recyclerview实现,返回无数个(实际Interge.MAXVALUE)item,第n个item显示第n%m张图片 3.使用recyclerview.scrollBy  每个一段时间水平滚动一段距离 4.通过layoutManager.findFirstVisibleItemPosition()获取当前显示的第一个View是第几个item,上面

  • Android ListView实现无限循环滚动

    本文实例为大家分享了Android无限循环滚动的具体代码,供大家参考,具体内容如下 因项目需要循环展示列表数据,所以就实现了这个无限循环滚动的 LIstView.先说一下原理,原理呢,其实很简单,首先将要展示的数据循环展示三遍 监听ListView的滚动事件,当ListView滚动到第一遍第第二个时,ListView变自动跳到第二遍的第二个,同理,如果ListView滚动到倒数第一个时,ListView自动跳转到第二遍的倒数第一个,然后可以不停的向上或者向下滑动,永远不会到头,废话少说,上 代码

  • 小程序实现文字循环滚动动画

    小程序实现文字循环滚动动画

    本文通过实例为大家分享了小程序实现文字循环滚动的具体代码,供大家参考,具体内容如下 解决问题: 1.文字循环播放特效 2.小程序退出.隐藏后台动画停止(已解决) 效果: 代码: wxml <view animation="{{animation}}" class="animation"> 919测试使用--小程序循环播放~~~ </view> wxss .animation{ width: 100%; transform: translate

  • 原生js实现表格循环滚动

    原生js实现表格循环滚动

    本文实例为大家分享了js实现表格循环滚动的具体代码,供大家参考,具体内容如下 css table{width: 500px;border: 1px solid gray;border-collapse: collapse;} th,td{line-height: 35px;border: 1px solid gray;text-align: center;width: 120px;} .scroll-box{height: 280px;width: 500px;overflow: hidden;

随机推荐