vue3-seamless-scroll 无缝滚动组件

最新推荐文章于 2024-07-08 18:31:57 发布

幼儿园扛把子DD

最新推荐文章于 2024-07-08 18:31:57 发布

阅读量2.3k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/HRSR1314/article/details/136852114

版权

本文介绍了如何在Vue3中使用vue3-seamless-scroll组件实现无缝滚动效果，包括组件的安装方式、全局和局部注册、使用示例以及详细的组件配置选项。

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

Vue

1、vue3-seamless-scroll 无缝滚动组件

1、安装

npm安装

npm install vue3-seamless-scroll --save

Yarn 安装
- ```
yarn add vue3-seamless-scroll
```

browser 安装

<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"> </script>

2、使用

2.1 注册组件

全局组件注册install

import vue3SeamlessScroll from 'vue3SeamlessScroll';
app.use(vue3SeamlessScroll);

单个.vue文件局部注册

<script>
  import { defineComponent } from "vue";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
      components: {
        Vue3SeamlessScroll
      }
   })
</script>

2.2 使用组件

<template>
  <vue3-seamless-scroll :list="list" class="scroll">
    <div class="item" v-for="(item, index) in list" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </vue3-seamless-scroll>
</template>
<script>
import { defineComponent, ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

export default defineComponent({
  name: "App",
  components: {
    Vue3SeamlessScroll
  },
  setup() {
    const list = ref([
      {
        title: "Vue3.0 无缝滚动组件展示数据第1条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第2条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第3条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第4条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第5条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第6条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第7条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第8条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第9条",
        date: Date.now(),
      },
    ]);
    return { list };
  },
});
</script>

<style>
.scroll {
  height: 270px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
}

.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>

3、组件配置

1	2	3	4
key	description	default	val
step	数值越大速度滚动越块	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
direction	是否开启用鼠标hover控制	true	Boolean
openTouch	方向0往下 1向上 2 向左 3 向右	1	Number
singleHeight	单步运动停止的高度（默认是0无缝不停止的滚动）direction=>0/1	0	Number
waitTime	单步停止等待的时间（默认值1000ms）	1000	Number
switchOffset	左右切换按钮juice左右边界的边距（px）	30	Number
autoPlay	1.1.17版本前手动切换时需要设置为false	true	Number
switchSingleStep	手动单步切换step值（px）	134	Number
switchDelay	单步切换的动画时间（ms）	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean