JiangxiMiniProgram/pages/indexEntry/examines/comp/marquee.vue

<template>
    <div class="marquee-box">
        <div class="marquee-content" ref="out">
            <p :class="run?speed:''">
                <span class="text1" ref="in" >{{content}}</span>
                <span class="text2" v-if="showtwo||run">{{content}}</span>
            </p>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'VueMarquee',
    data (){
      return{
        run: false,
        pWidth: '',
      }
    },
    props: {
      content: {
        default: "暂无公告内容",
        type: String
      },
      speed: {
        default: 'slow',
        type: String
      },
      showtwo: {
        default: true
      }
    },
    watch: {
        content (){
            var _this = this;
            setTimeout(()=>{
                _this.$nextTick(()=>{
                    let out = _this.$refs.out.clientWidth;
                    let _in = _this.$refs.in.clientWidth;
                    _this.pWidth = 2*_in;
                    _this.run=_in>out?true:false;
                });
            },0);
        }
    },
    mounted (){
        var _this = this;
        this.$nextTick(()=>{
            let out = _this.$refs.out.clientWidth;
            let _in = _this.$refs.in.clientWidth;
            _this.run=_in>out?true:false;
        });
    }
  }
</script>
<style lang="scss" scoped>
    .marquee-box {
        height: 24px;
        line-height: 24px;
        color: #DD1D35;
        font-size: 12px;
    }
    .marquee-content{
        overflow: hidden;
        width:100%
    }
    .marquee-content p{
        display: inline-block;
        white-space: nowrap;
        margin: 0;
        font-size: 0;
    }
    .marquee-content span{
        display: inline-block;
        white-space: nowrap;
        padding-right: 300px;
        font-size: 12px;
    }

    .quick{
        -webkit-animation: marquee 5s linear infinite;
        animation: marquee 5s linear infinite;
    }
    .middle{
        -webkit-animation: marquee 8s linear infinite;
        animation: marquee 8s linear infinite;
    }
    .slow{
        -webkit-animation: marquee 25s linear infinite;
        animation: marquee 25s linear infinite;
    }
    @-webkit-keyframes marquee {
        0%  { -webkit-transform: translate3d(0,0,0); }
        100% { -webkit-transform: translate3d(-50%,0,0); }
    }
    @keyframes marquee {
        0%  { transform: translateX(0); }
        100% { transform: translateX(-50%);}
    }
</style>