vue中頂部提示信息跳動顯示

transition: top 0.5s;實現跳動的關鍵，

word-break:break-all;實現字體換行

""轉譯，否則掘金不讓發

若是各位大佬發現哪裏有問題了，請提出方便小菜作改正。

效果：

<\template>

<div class="wrap">
  <ul 
  class="scrollDiv" 
  style="position: absolute;transition: top 0.5s;">
    <li>1123123132131313213132131</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6123123132nihao</li>
  </ul>
</div>
複製代碼

<\/template>

<\script>

export default {

name: 'App',

mounted () {

this.srcollWrap()
複製代碼

},

methods: {

srcollWrap(){
    // 獲取滾動內容的高度
  let scrollDivHeight = document.getElementsByClassName("scrollDiv")[0].offsetHeight
    //能夠理解爲滾動速度
  let scrollPx=0;
    // 滾動次數
  let num = scrollDivHeight/60
    setInterval(function(){
      scrollPx++
      if(scrollPx < num){
        // 一次滾動的距離爲60*scrollPx
        document.getElementsByClassName("scrollDiv")[0].style.top=-60*scrollPx+'px'
      }else{
        document.getElementsByClassName("scrollDiv")[0].style.top=0
        scrollPx=0
      }          
    },1000)
}
複製代碼

} }

</script>

<\style>

#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

ul,li{ list-style: none; }

img{ display: block; border: 0; }

a{ text-decoration: none; }

.wrap{ width: 300px; height: 60px; overflow: hidden; position: relative; }

.wrap .scrollDiv li{ width: 60px; line-height: 60px; font-size: 36px; text-align: center; word-break:break-all; }

</style>