current position:Home>The Vue seamless scroll list scrolls automatically

The Vue seamless scroll list scrolls automatically

2022-04-29 08:50:38囍囍囍囍囍囍囍囍囍囍 A

1. download

cnpm i --s vue-seamless-scroll

2. stay main.js Quoted in the document

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3.

<template>
  <div>
    <vue-seamless-scroll
      :data="tenList"
      class="seamless-warp"
      :class-option="classOption"
    >
      <ul class="tenCenter">
        <li v-for="(item, index) in tenList" :key="index">
          <p>{
   { item.title }}</p>
          <line-chart :lineChartData="item.value"></line-chart>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
<script>
import LineChart from "./lineChart.vue";
export default {
  components: { LineChart },
  data() {
    return {
      tenList: [
        {
          title:
            " Implement our province “” Action plan , Study and formulate detailed measures ",
          value: 20,
        },
        {
          title: " Deepen construction ",
          value: 30,
        },
        {
          title: " Do a good job in Northern Style adjustment , Ensure a smooth transition ",
          value: 10,
        },
        {
          title:
            " Project construction and operation plan ",
          value: 50,
        },
        {
          title:
            " Networking pilot demonstration construction ",
          value: 80,
        },
        {
          title: " For the second time, the province “ Carbon reaches its peak ",
          value: 20,
        },
        {
          title: " Deep peak ” Characteristic research , Improve AC / DC hybrid control measures ",
          value: 30,
        },
        {
          title: " Adjust the operation mode , Ensure a smooth transition ",
          value: 10,
        },
        {
          title:
            " The construction and operation plan of the whole year's gas transmission project ",
          value: 50,
        },
        {
          title:
            " Docking construction requirements , Actively participate in the provincial Internet pilot demonstration construction ",
          value: 80,
        },
      ],
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.5, //  The higher the value, the faster the speed 
        // limitMoveNum: 10, //  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)
      };
    },
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
.seamless-warp {
  height: 264px;
  overflow: hidden;
}
.tenCenter {
  padding: 10px 25px;
  list-style: disc;
}
</style>

Configuration item

step     The higher the value, the faster the speed     1    Number
limitMoveNum     The amount of data that enables seamless scrolling     5    Number
hoverStop     Whether to enable the mouse hover control     true    Boolean
direction     Direction 0 Down 1 Upward 2 towards the left 3 towards the right     1    Number
openTouch     Mobile terminal on touch slide     true    Boolean
singleHeight     One step height stop motion ( The default value is 0 It's seamless rolling ) direction => 0/1    0    Number
singleWidth     The width of the one-step stop ( The default value is 0 It's seamless rolling ) direction => 2/3    0    Number
waitTime     One step stop waiting time ( The default value is 1000ms)    1000    Number
switchOffset     The margin between the left and right switch buttons and the left and right boundaries (px)    30    Number
autoPlay     Whether to play automatically or not switch When switching, it needs to be set to false    true    Boolean
switchSingleStep     Manual one-step switching step value (px)    134    Number
switchDelay     Animation time of one-step switching (ms)    400    Number
switchDisabledClass     You can't click on the status switch The class name of the parent element of the button     disabled    String
isSingleRemUnit    singleHeight and singleWidth Open or not rem Measure     false    Boolean

copyright notice
author[囍囍囍囍囍囍囍囍囍囍 A],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290621251083.html