vue公告横向滚动组件封装

最新推荐文章于 2024-08-22 15:31:06 发布

xkxnq

最新推荐文章于 2024-08-22 15:31:06 发布

阅读量2.2k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/xkxnq/article/details/104879987

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种基于Vue.js的自定义滚动组件Scroller的实现方法。组件接收父组件传入的数据列表，通过定时更新CSS transform属性实现内容的平滑滚动效果。文章详细展示了组件的HTML模板、ECMAScript代码及CSS样式，最后提供了组件在页面中使用的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
新建组件scroll.vue

  <template>
  <div class="wrap">
    <ul id="marquee">
      <li v-for="(item,index) in lists" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: "Scroller",
  props: ["lists"], // 父组件传入数据， 数组形式
  methods: {
    move() {
      // 获取内容区宽度
      let width = document.getElementById("marquee").scrollWidth;
      let marquee = document.getElementById("marquee");
      let speed = 10; // 位移距离
      // 设置位移
      setInterval(function() {
        speed = speed - 1;
        // 如果位移超过文字宽度，则回到起点

        if (-speed >= width) {
          speed = 500;
        }
        marquee.style.transform = "translateX(" + speed + "px)";
      }, 40);
    }
  },
  mounted: function() {
    this.move();
  }
};
</script>
 <style scoped>
/*样式的话可以写*/
.wrap {
  overflow: hidden;
  color: red;
}
#box {
  height: 100%;
}
ul,
li {
  margin: 0;
  padding: 0;
}
ul {
  white-space: nowrap;
  margin: 0 10px;
}
li {
  height: 100%;
  list-style: none;
  margin-right: 10px;
  display: inline-block;
}
</style>

在需要的页面调用组件

<template>
  <div class="aa">
    <Scroller :lists="list" class="scrollContainer" />
  </div>
</template>
<script>
import Scroller from "@/components/Scroll.vue"
export default {
  components: { Scroller },
  data() {
    return {
      list: ["欢迎大家来一起学习","在一起学习","一起学习","学无止境"]
    };
  }
};
</script>
<style scoped>
/*样式的话可以写*/
.scrollContainer {
  /* color: red; */
  font-size: 16px;
  margin-left: 10px;
  width: 500px;
  height: 30px;
  border: 1px solid #000;
  line-height: 30px;
  overflow: hidden;
}
</style>