ionic-基于angularjs实现固定顶部的可循环滚动文字的通知banner

最新推荐文章于 2022-09-29 15:18:35 发布
最新推荐文章于 2022-09-29 15:18:35 发布
阅读量5.5k 收藏
点赞数 2
分类专栏： ionic框架 文章标签： ionic banner 滚动文字
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012979009/article/details/53670110
版权
本文介绍如何在ionic应用中结合angularjs，通过$ionicContentBanner服务实现一个固定在顶部且可循环滚动的文字通知banner。该组件允许自定义文本内容、样式和位置，适用于展示各种提示信息。
摘要由CSDN通过智能技术生成

最近一直晚上闲着，就开始想着在banner的小提示的基础上再封装一些其他的功能，比如在一些app中的二级导航栏处会出现一些滚动文字的小提示，所以就开始构思如何在ionic的基础上，利用css3实现这个小组件。

下面是一个demo:





首先的在控制器中依赖$ionicContentBanner     

$ionicContentBanner.showstablebanner({     
       text:'各位旅客您们好，欢迎您们来到广州！',     
       type:'info',    
});   

可配置值：    

最低0.47元/天 解锁文章
bingcool空间
关注
专栏目录
angularjs 滚动条 angular-scroll插件
沐沐
06-09 6297
超级无敌好用强推！！！！ 超级无敌好用强推！！！！ 超级无敌好用强推！！！！ 使用缘由： 在进行网页开发时，导航栏想做成能够随着页面滚动条距浏览器上下距离来调整状态的样式，所以进行了探索。 但是网上获取滚动条scroll以及对其进行操作的方法，多数为jQuery以及javascript，但是项目使用的是angularjs，如果和jQuery混写可能会出现问题，所以自...
ionic实现部分内容滚动，以及滚动内容显示不完全的解决办法
半杯凉开水
08-23 2815
ionic项目开发时，我们往往需要实现这么一个，上面标题等部分固定不动，下面的展示信息部分内容较多时实现滚动。 在ion-content内的部分默认是滚动的，但是我们不需要它全部内容滚动，应该怎么办呢？ 1、先给ion-content加上属性scroll="false",如下图： <ion-content scroll="false"> ... </ion-con...
ionic实现滚动触发动作
raquelle的记忆宫殿
03-31 1289
ionic可以在移动端实现滚动触发函数，可以用来实现分页加载。HTML：&lt;ion-content&gt; &lt;ion-infinite-scroll on-infinite="vm.getdata()" ng-if="vm.total &gt; vm.page+1" immediate-check="false"&gt; &lt;/ion-infinite-scroll&am
angular 横向自滚动（滚动广告效果）
qq_43730595的博客
01-13 836
横向自滚动 广告等应用场景
简单总结一下IONIC的滚动
chengkui7113的博客
11-26 331
ionic的滚动有两种方案：基于ionic框架本身实现的scroll（有点类似于iscroll ，都是模拟滚动 ， 但是性能相差巨大 ， iscroll的性能接近于原生滚动了）；基于webview原生的滚动。 用法 在ionic中应用ionic实现的scroll，可以使用如下两个标签io...
ionic-banner-tips是一个基于ionic,利用angularjs实现的app的banner小提示的组件功能.zip
最新发布
08-22
可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的...
ionic-angularjs-kitchensink:使用 Ionic Framework + AngularJS 开发的简单厨房水槽应用程序
06-09
请参阅 Ionic-AngularJS-IntelXDK-Seed 项目以开始使用构建原生打包应用程序： 英特尔 XDK 将帮助您使用任何 HTML5 项目轻松构建适用于 iPhone/iPad、Android、Windows Phone 和更多商店的应用程序。
cordova-plugin-ionic-webview:用于Cordova的Web View插件，专门用于Ionic应用程序
05-04
注意：此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ，它使用的新功能可能不适用于所有应用程序。 请参阅和 2.x文档可以在找到。 :open_book: 文档： : :megaphone: 支持/问题？ 有关常规支持...
ionic-native-http-connection-backend：Ionic和iOS的CORS问题的解决方案
01-30
ionic-native-http-connection-backend 该库添加@ionic-native/http （如果可用）作为与Angular的Http和HttpClient的连接后端 动机 现在，Apple促进/要求使用WKWebView而不是不推荐使用的UIWebView ，Ionic已通过其...
angularjs实现文字上下无缝滚动特效代码
11-22
最近没有项目做，于是闲暇之余学习了下angularjs知识，然后写了一个文字上下无缝滚动的例子，主要写的是一个小小的指令。 css代码： 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;} .slide li {height: 49px;line-height: 49px;text-align: left
ionic-基于angularjs实现友好体验的banner提示
bingcool
12-08 2152
工作2年多来，从开始的学HTML,CSS,JS,jquery，逐渐到学php,linux基础，mysql,再到后来的thinkphp框架，yii2框架，mongodb,redis,angularjs,ionic,jquery插件开发，webcomponent，swoole,workman,写博客，github开源代码，以至扩展到了ffmpeg,开源检索引擎，分布式架构，移动互联网的产品设计，用户体
Angular2数据滚动展示
weixin_40156417的博客
09-29 720
Angular2数据自动循环滚动展示，鼠标经过时暂停滚动效果，AfterViewInit生命周期内获取dom高度
APP中常见上下循环滚动通知的简单实现，点击可进入详情
weixin_33826609的博客
04-01 937
APP中常见上下循环滚动通知的简单实现，点击可进入详情 关注finddreams博客，一起分享一起进步！http://blog.csdn.net/finddreams/article/details/45025865 　　对于能上下滚动的消息，我们并不陌生，常常在一些电商类的APP上有看到，比如淘宝之类的。大概的效果是一个不断上下循环滚动的通知，点击这个通知即可进去消息的详情界面。运行...
Angular调用redis实现输入框自动提示
gwj41的专栏
11-29 1178
其实用Elasticsearch比较完美，redis的版本只能从开头的字符匹配，但是ELK还不会，准备学学，先用redis实现下，redis返回的提示信息的list，就省略不写了。 页面代码片段   Auto complete   timeout; onKey(event: any) { // 取消上一次的timeout设置 clea
移动端ionic App 资讯上下循环滚动的实现
NaAlone的博客
08-29 2207
在ionic App中遇到一个文字上下循环滚动的效果实现，网上查了之后才知道有个通俗的名字-跑马灯。 这里借助了jQuery库的选择器和动画函数，并且把jQuery的操作封装到指令里。先看指令代码： angular.module('starter') .directive('slideScroll', function ($window, $timeout) { ret
ionic3学习笔记(六)--轮播图
Dan_2017
12-25 4963
下面是轮播图的实现 1，页面模板 <!-- 轮播: autoplay:2s之后开始轮播 loop:循环播放 pager:分页器（小圆点） pager=true --> 2，ts文件里对数据的初始化 // 初始化slides initSlides(){ this.slidesItems=
angular实现消息滚动
Coder_KellySha的博客
08-21 1533
<div nz-row class="mb-sm"> <nz-card class="news-card"> <h3 class="font-weight-bold msg-text">最新消息：</h3> <div class="scroll-box" [class.scroll-top]="flag"> ...
Cordova-Ionic-AngularJS环境搭建与Eclipse开发HybridApp详细教程
本文将详细介绍在Windows 10 64位系统下，如何安装并配置Cordova、Ionic和AngularJS环境，以及如何使用Eclipse开发HybridApp的过程。首先，我们回顾一下Cordova和Ionic这两个关键概念。 Cordova（原名PhoneGap），...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值