vue3-scroll-seamless一个简单的基于vue3.js的无缝滚动

黎明寄波澜*

已于 2024-06-20 10:53:46 修改

阅读量631

点赞数 4

文章标签： javascript 开发语言 ecmascript

于 2024-03-20 10:01:58 首次发布

本文链接：https://blog.csdn.net/weixin_55209970/article/details/136867330

版权

本文介绍了如何在Vue3项目中使用vue3-scroll-seamless插件来实现类似跑马灯效果的无缝滚动列表，提供了代码示例和官方文档链接以帮助开发者配置参数。

摘要由CSDN通过智能技术生成

最近有需求要实现类似于跑马灯效果的图话不多说上插件

npm install vue3-scroll-seamless --save

<template>
  <div class="demo">
    <vue3ScrollSeamless
      class="scroll-wrap"
      :classOptions="classOptions"
      :dataList="list"
    >
      <ul class="ui-wrap">
        <li class="li-item" v-for="(item, i) of list" :key="i">
          <div class="img">
            <img :src="item.src" alt="" />

            <div class="day">
              {{ item.day }}
            </div>
          </div>
          <div class="text">
            {{ item.name }}
          </div>
        </li>
      </ul>
    </vue3ScrollSeamless>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
const props = defineProps(["list"]);
const list = ref(props.list);
console.log(list, "list");
const classOptions = {
  limitMoveNum: 2,
  direction: 2,
  step: 1,
};
</script>

<style scoped lang="scss">
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-wrap {
  width: 830px;
  height: 256px;

  overflow: hidden;
}
.ui-wrap {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.li-item {
  padding: 17px;
  margin-top: 0;
  margin-left: 12px;
  width: 196px;
  height: 250px;
  text-align: center;
  font-size: 28px;
  box-sizing: border-box;

  flex-direction: column;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
  @include displayFlex;
  .img {
    position: relative;
    width: 161px;
    height: 161px;
    background: #ebffdf;
    border-radius: 12px 12px 12px 12px;
    border: 3px solid #a8f6aa;
    .day {
      position: absolute;
      width: 86px;
      height: 46px;
      background: #a8f6aa;
      border-radius: 35px 0px 12px 0px;
      right: 0;
      bottom: 0;
    }
  }
  img {
    width: 161px;
    height: 161px;
    background: #ebffdf;
  }
  .text {
    height: 49px;
    font-weight: 400;
    font-size: 30px;
    color: #3b8c0b;
    line-height: 41px;
    margin-top: 12px;
    font-weight: 400;
    font-size: 31px;

    @include displayFlex;
  }
}
</style>

官方文档在下边有些参数自己看配置就好
安装 | vue3-scroll-seamless (xiaofulzm.github.io)