NoticeBar 通告栏文字不滚动显示

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

解决:重新initSize即可

1、布局


      

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

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

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

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

NoticeBar 通告栏文字不滚动显示_第1张图片

在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行增加样式

NoticeBar 通告栏文字不滚动显示_第2张图片

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

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

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

 

你可能感兴趣的:(uniapp)