原生css3动画滚动配置参数

count

动画循环次数，默认无限循环

  type: [Number, String],
  default: "infinite",
  required: false

duration

动画持续时间，默认根据容器大小计算
```
  type: [Number, String],
  required: false
```

cubicBezier

贝塞尔曲线

  type: Object,
  default: {
    x1: 0,
    y1: 0,
    x2: 1,
    y2: 1,
  },
  required: false

示例

默认配置

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

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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 { ...toRefs(state) };
  },
});
</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>

)

向下滚动

<template>
  <css-seamless-scroll :datas="datas" direction="down" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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 { ...toRefs(state) };
  },
});
</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>

向左滚动

<template>
  <css-seamless-scroll :datas="datas" direction="left" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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 { ...toRefs(state) };
  },
});
</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>

滚动速度

<template>
  <css-seamless-scroll :datas="datas" duration="2" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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 { ...toRefs(state) };
  },
});
</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>

鼠标悬停

<template>
  <css-seamless-scroll :datas="datas" hover class="scroll">
   <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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 { ...toRefs(state) };
  },
});
</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>

单步停顿

<template>
  <css-seamless-scroll :datas="datas" duration="30" step="9" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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 { ...toRefs(state) };
  },
});
</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>

单行停顿时间

<template>
  <css-seamless-scroll :datas="datas" duration="60" step="9" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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 { ...toRefs(state) };
  },
});
</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>

数组属性更新

<template>
  <css-seamless-scroll :datas="datas" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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(),
        },
      ]
    });
    onMounted(() => {
      setInterval(() => {
        state.datas[1].title = "我是第2条更新数据";
        state.datas[5].title = "我是第6条更新数据";
        state.datas[7].title = "我是第8条更新数据";
      }, 1000);
    });
    return { ...toRefs(state) };
  },
});
</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>

数组添加数据

<template>
  <css-seamless-scroll :datas="datas" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      datas: [
        {
          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(),
        },
      ]
    });
    onMounted(() => {
      setInterval(() => {
        state.datas.push({
          title: "我是新增的一条数据",
          date: Date.now(),
        });
      }, 2000);
    return { ...toRefs(state) };
  },
});
</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>

echart图表

<template>
  <css-seamless-scroll :datas="datas" class="scroll">
    <div
      v-for="(item, index) in [1, 2, 3]"
      :key="index"
      class="chart"
      style="width: 360px; height: 200px"
    ></div>
    <template #html>
      <div
        v-for="(item, index) in [1, 2, 3]"
        :key="index"
        class="chart"
        style="width: 360px; height: 200px"
      ></div>
    </template>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import * as echarts from "echarts";

export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      chartOptions: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
    });
    onMounted(() => {
      const charts = document.querySelectorAll(".chart");
      for (let index = 0; index < charts.length; index++) {
        const element = charts[index];
        echarts.init(element).setOption(state.chartOptions);
      }
    });
    return { ...toRefs(state) };
  },
});
</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>

Fork备份 / vue3-seamless-scroll

原生css3动画滚动配置参数

示例

默认配置

向下滚动

向左滚动

滚动速度

鼠标悬停

单步停顿

单行停顿时间

数组属性更新

数组添加数据

echart图表

简介

发行版

贡献者

近期动态

Fork备份 / vue3-seamless-scroll .gitee-modal { width: 500px !important; }

原生css3动画滚动配置参数

示例

默认配置

向下滚动

向左滚动

滚动速度

鼠标悬停

单步停顿

单行停顿时间

数组属性更新

数组添加数据

echart图表

简介

发行版

贡献者

近期动态

搜索帮助

Fork备份 / vue3-seamless-scroll