current position:Home>Array seamless scrolling demo

Array seamless scrolling demo

2022-06-24 09:51:16Time202051

https://github.com/chenxuan0000/vue-seamless-scroll

<template>
  <div>
    <vue-seamless-scroll
      :data="alarmdata"
      class="seamless-warp"
      :class-option="classOption"
    >
      <div v-for="(item, index) in alarmdata" :key="index">
        <div>{
    {
     item.name }}</div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import Singletion from "@/utils/indexedDB";
export default {
    
  data() {
    
    return {
    
      state: null,
      alarmdata: [
        {
     name: "zs", age: 12 },
        {
     name: "zs1", age: 12 },
        {
     name: "zs2", age: 12 },
        {
     name: "zs3", age: 12 },
        {
     name: "zs4", age: 12 },
        {
     name: "zs6", age: 12 },
        {
     name: "zs7", age: 12 },
        {
     name: "zs8", age: 12 },
        {
     name: "zs9", age: 12 },
        {
     name: "zs10", age: 12 },
      ],
    };
  },
  computed: {
    
    classOption() {
    
      return {
    
        step: 0.8, //  The higher the value, the faster the speed 
        // isSingleRemUnit:true,
        limitMoveNum: this.alarmdata.length, //  The amount of data that starts rolling seamlessly  this.dataList.length
        hoverStop: true, //  Whether to turn on mouse hover stop
        direction: 1, // 0 Down  1 Up  2 towards the left  3 towards the right 
        openWatch: true, //  Turn on data real-time monitoring refresh dom
        singleHeight: 0, //  One step height stop motion ( The default value is 0 It's seamless rolling ) direction => 0/1
        singleWidth: 0, //  The width of the one-step stop ( The default value is 0 It's seamless rolling ) direction => 2/3
        waitTime: 1000, //  The time when the one-step movement stops ( The default value is 1000ms)
      };
    },
  },
};
</script>

<style>
.seamless-warp {
    
  margin: 0 auto;
  width: 40%;
  /* height: calc(100% - 80px); */
  height: 200px;
  line-height: 45px;
  overflow: hidden;
  border: 2px solid #ccc;
}
</style>

copyright notice
author[Time202051],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/175/202206240903259101.html

Random recommended