vue.js文字滚动效果

最新推荐文章于 2022-08-16 14:58:19 发布

黑无常De上帝

最新推荐文章于 2022-08-16 14:58:19 发布

阅读量115

点赞数

分类专栏： Element + VUE 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_30228701/article/details/120977200

版权

Element + VUE 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

HTML

<el-col :span="16">
    <div class="companyEntryName">
        <div class="notice">
            <ul  class="marquee_list" :class="{marquee_top:animate}">
                <li v-for="(item, index) in enterpriseNameList" :key="index">
                    <span>{{item.enterpriseName}}</span>
                </li>
            </ul>
       </div>
    </div>
</el-col>

data () {
    retrun {
    // 文字滚动效果
      enterpriseNameList: [],
    }
},
created () {
    // 企业名称滚动效果时间设置
    setInterval(this.showMarquee, 2500)
},
methods: {
    // 企业名称滚动效果
    showMarquee () {
      this.animate = true
      setTimeout(() => {
        this.enterpriseNameList.push(this.enterpriseNameList[ 0 ])
        this.enterpriseNameList.shift()
        this.animate = false
      }, 500)
    },
}