vant -- noticebar不滚动、text文字消失

最新推荐文章于 2024-08-16 00:35:07 发布

kyleOPM

最新推荐文章于 2024-08-16 00:35:07 发布

阅读量4.3k

点赞数 3

分类专栏： vant 文章标签： vue

本文链接：https://blog.csdn.net/kyleOPM/article/details/110662102

版权

vant 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vant noticebar组件

问题场景：

问题场景：

使用v-show切换，或者popup气泡组件切换，导致noticebar停止滚动，text文字消失。

解决方法：

使用watch监听切换动态，对text重新赋值“XXX”。

组件：

<van-notice-bar :color="noticebarOption.color"
                :background="noticebarOption.background"
                :text="noticebarOption.text">
</van-notice-bar>

data:

noticebarOption: {
    color: "#fff",
    background: "#969799",
    text: ' ---  --- '
}

init函数:

initNoticebarOption () {
  if (this.patrolInfo.status === 0) {
    this.noticebarOption = {
      color: "#fff",
      background: "#969799",
      text: '巡查未开始 --- ' + this.info.wayName + ' --- 巡查未开始'
    }
  } else if (this.patrolInfo.status === 2) {
    this.noticebarOption = {
      color: "#1989fa",
      background: "#ecf9ff",
      text: '正在巡查 --- ' + this.info.wayName + ' --- 正在巡查'
    }
  } else if (this.patrolInfo.status === 3) {
    this.noticebarOption = {
      color: "#ed6a0c",
      background: "#fffbe8",
      text: '巡查已暂停 --- ' + this.info.wayName + ' --- 巡查已暂停'
    }
  }
}

watch:

watch: {
    isState (value) { // true || false
          if (value) {
                this.initNoticebarOption() //
          } else {
                this.noticebarOption.text = ' ---  --- '
          }
    }
}