vue跑马灯组件vue-marquee的使用

12 篇文章 0 订阅

1、安装vue-marquee

npm install vue-marquee

2、在所需要的页面中引入组件

import vueMarquee from 'vue-marquee';
components: {
      vueMarquee
},

3、在页面中使用vue-marquee组件

<vue-marquee :duration="600" :interval="2000">
    <div v-for="(item,index) in 10" :key="index">
        <p>
            <span>第{{index+1}}名:test{{index+1}}</span>
        </p>
    </div>
</vue-marquee>

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue跑马灯 (marquee) 组件是一种常见的UI组件,可以用于在页面上展示滚动的文字或图片。以下是一个简单的Vue跑马灯组件示例: ```vue <template> <div class="marquee"> <div class="marquee-content" :style="{transform: 'translateX(' + position + 'px)'}"> <slot></slot> </div> </div> </template> <script> export default { data() { return { position: 0, interval: null }; }, mounted() { this.interval = setInterval(() => { const content = this.$el.querySelector('.marquee-content'); const width = content.offsetWidth; const parentWidth = this.$el.offsetWidth; if (width > parentWidth) { this.position -= 1; if (Math.abs(this.position) >= width) { this.position = parentWidth; } } }, 20); }, beforeDestroy() { clearInterval(this.interval); } }; </script> <style> .marquee { overflow: hidden; } .marquee-content { display: inline-block; white-space: nowrap; } </style> ``` 在上面的示例中,我们定义了一个名为 `marquee` 的组件,它包含一个名为 `marquee-content` 的子组件,用于包裹滚动的内容。我们使用CSS的 `overflow` 属性设置父元素为 `hidden`,以隐藏超出父元素边界的内容。 在 `mounted` 钩子函数中,我们使用 `setInterval` 函数定时更新 `marquee-content` 的 `transform` 属性,以实现滚动效果。我们在 `beforeDestroy` 钩子函数中清除定时器,以避免内存泄漏。 在使用 `marquee` 组件时,我们可以将需要滚动的内容插入到组件中,例如: ```vue <marquee> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </marquee> ``` 在上面的示例中,我们插入了三张图片到 `marquee` 组件中。这些图片将在组件中滚动,并且当它们的宽度超出父元素的宽度时,它们将自动滚动。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值