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&...
<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页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部