NoticeBar 通告栏文字不滚动显示

原因1：组件的animationDuration属性值为'0s'导致

解决：重新initSize即可

1、布局

<block v-if="laba.remark"><uni-notice-bar color="#F85550"ref="notice":text="laba.remark"showClose="true" single="true" scrollable="true"show-icon="true" :speed='30'  :showGetMore="laba.id?true:false"@getmore="getMore" />
</block>

2、在onShow方法中判断并重置

// 坑：小喇叭不显示滚动文字
this.timeIDNotice=setTimeout(()=>{if (this.$refs.notice.animationDuration=='0s') {this.$refs.notice.initSize();}
},1000)

原因2：组件完全加载出来，animationDuration有值，但就是不滚动

debugger页面布局，发现通过在下面红色框中添加display:flex;文字会滚动出现

在uni-notice-bar.vue中修改样式

/* #ifndef APP-NVUE */
.uni-noticebar__content-wrapper--scrollable {position: relative;height: 18px;display: flex;
}
/* #endif */

还是不可用，每次在加载完毕之后，修改这个属性才会出现文字滚动，这样的话需要在加载完毕之后，再修改样式

解决：

1、保持上面的样式修改

2、在uni-notice-bar.vue中增加一个prop delay用于在组件加载完之后再设置样式

delay: {// 是否延迟显示type: Boolean,default: false
},

3、在第17行增加样式

4、在使用notice组件的页面的onShow方法中增加延时

 <!-- 小喇叭通知--><block v-if="laba.remark"><uni-notice-bar color="#F85550"ref="notice":text="laba.remark"showClose="true" single="true" scrollable="true"show-icon="true" :speed='30'  :showGetMore="laba.id?true:false":delay="delay"@getmore="getMore" /></block>

data() {return { delay:false};
},

onShow() {// 坑：小喇叭不显示滚动文字this.timeIDNotice=setTimeout(()=>{if (this.$refs.notice.animationDuration=='0s') {this.$refs.notice.initSize();}this.delay=true},1000)},

NoticeBar 通告栏文字不滚动显示相关推荐

php中滚动显示文字,HTML如何实现文字的滚动效果
在HTML中,可以通过HTML的标签来实现文字的滚动效果,通过设置标签里的不同属性来实现不同的文字的滚动效果. 在HTML中实现文字的滚动效果其实很简单,本篇文章就给大家介绍HTML 标签实现文字的滚 ...
创建一个简单的应用程序窗口，显示“欲穷千里目更上一层楼”。这一行文字从窗口中向左滚动显示，而且每显示一轮，改变一次颜色，改变一次字体，一个周期为4种颜色，分别为红、绿、黄、蓝，四种字体分别为宋体、楷
创建一个简单的应用程序窗口,显示"欲穷千里目更上一层楼".这一行文字从窗口中向左滚动显示,而且每显示一轮,改变一次颜色,改变一次字体,一个周期为4种颜色,分别为红.绿.黄.蓝,四 ...
C# ：Winform窗体中文字滚动显示
想要做到文字滚动显示,首先需要把文字写入Lable控件中,将Label控件的位置改变就可以实现文字的位置变换. 1.在窗体中添加Timer和Lable控件 2.编写代码 //滚动 Lable priv ...
android文字多行滚动显示,Android TextView多行文本滚动实现
Android中我们为了实现文本的滚动可以在ScrollView中嵌入一个TextView,其实TextView自己也可以实现多行滚动的,毕竟ScrollView必须只能有一个直接的子类布局.只要在l ...
js简单文字滚动显示
js简单文字滚动显示 1. html内容 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
css 超出文字头尾相接滚动_【转载】CSS3 ——文本超出设置超出显示...与跑马灯效果...
桌面平台的开发中,内容超出设定区域的大小时,我们常用的操作有三种,一个是显示,一个是隐藏,一个是出现滚动条. 在手机平台的开发中,我们常用的操作也有三种,第一是隐藏,第二是显示"...&qu ...
原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...
MFC开发之静态文本框实现编辑框滚动显示文字效果
效果: 1.通过滚轮拖动进行滚动显示 2.通过鼠标滚轮显示 3.保证滚动每行和字实际高度一致 4.滚轮行数和需要滚动的字行数一致正文:需要自绘静态文本框一.使用滚轮和滚动条在PreTransla ...
html公告栏设计,原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...

NoticeBar 通告栏文字不滚动显示

原因1：组件的animationDuration属性值为'0s'导致

解决：重新initSize即可

原因2：组件完全加载出来，animationDuration有值，但就是不滚动

解决：

NoticeBar 通告栏文字不滚动显示相关推荐

最新文章

热门文章