vue滚动文字

转自：https://www.jianshu.com/p/a68819f143ac

子组件Scroller

滚动文字template（小喇叭megaphone我用的是iview的图标，所以我加了个注释）

script部分

样式参考

父组件引用子组件

import Scroller from '@/path/Scroller'
export default {
  components: {
    Scroller
  },
  data () {
    return {
      list: [],
    }
  },
  ...

说明

因为考虑到滚动文字的list可能是ajax请求异步获取的，子组件只在mount时取一次父组件传过来的lists参数，那么得到的lists就是个空数组。

watch
一开始我在子组件中用了watch，监听props 的lists，但实际使用起来会造成滚动文字闪烁（一卡一卡的，目测是watch配上异步的定时器的锅），而且这么做也挺耗客户端性能的。我们也并不需要实时监听lists，只想在ajax请求得到结果后，再加载子组件罢了。

v-if
忽然就想到了v-if，当v-if=false(null,[],0)时，不加载相应的组件，当v-if=true（非空）时才加载，妙啊，就是它了。