vue中实现上下滑动文字通告的功能

发布时间:2019-01-10 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了vue中实现上下滑动文字通告的功能脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
<template>
<div class="marquee">

      <div class="marquee_title">
                 <span>免费微报</span>
      </div>
        <div class="marquee_box">
                <ul class="marquee_list" :class="{marquee_top:animate}">
                        <li v-for="(item,index) in marqueeList">{{item.name}}</li>
                </ul>
        </div>
</div>
</template> 
<script>
export default {
  data() {
    return {
      animate: false,marqueeList: [
        {
          name: "1军电视剧烦恼是的空间开发"
        },{
          name: "2军水电费了羧甲淀粉钠盛开"
        },{
          name: "3军第三方库收到货否"
        },{
          name: "4军杜师傅iOS"
        }
      ]
    };
  },created: function() {
    // 页面显示
    setInterval(this.showMarquee,2000);
  },methods: {
    showMarquee: function() {
      this.animate = true;

      setTimeout(() => {
        this.marqueeList.push(this.marqueeList[0]);

        this.marqueeList.shift();

        this.animate = false;
      },500);
    }
  }
};
</script>

<style scoped>
.marquee {
  width: 100%;

  height: 50px;

  align-items: center;

  color: #3a3a3a;

  background-color: white;

  display: flex;

  box-sizing: border-box;

  overflow: hidden;
}

.marquee_title {
  padding: 0 20px;

  height: 21px;

  font-size: 14px;

  border-right: 1px solid #d8d8d8;

  align-items: center;
}

.marquee_box {
  display: block;

  position: relative;

  width: 60%;

  height: 30px;

  overflow: hidden;
}

.marquee_list {
  display: block;

  position: absolute;

  top: 0;

  left: 0;
}

.marquee_top {
  transition: all 0.5s;

  margin-top: -30px;
}

.marquee_list li {
  height: 30px;

  line-height: 30px;

  font-size: 14px;

  padding-left: 20px;
}

.marquee_list li span {
  padding: 0 2px;
}
</style>

直接把上面的代码放到组件中去 然后把组件套在大组件中就可以了

总结

以上是脚本之家为你收集整理的vue中实现上下滑动文字通告的功能全部内容,希望文章能够帮你解决vue中实现上下滑动文字通告的功能所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签: