vue-seamless-scroll 列表滚动组件

@七禾页

已于 2024-10-10 10:28:57 修改

阅读量232

点赞数 2

分类专栏： vue 文章标签： vue.js javascript ecmascript

于 2024-09-12 13:55:22 首次发布

本文链接：https://blog.csdn.net/weixin_47132111/article/details/142173524

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 安装依赖

npm install vue-seamless-scroll --save

2. 全局注册

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

3. 页面使用

<template>
<div class="middle-bottom-content">
      <ul class="table-header">
        <li>
          <span v-for="(item, index) in header" :key="index">{{ item }}</span>
        </li>
      </ul>
      <vue-seamless-scroll class="warp" :data="listData" :class-option="optionSingleHeightTime">
        <ul class="list">
          <li class="list-item" v-for="(item, index) in listData" :key="index">
            <span>{{ item.data1}}</span>
            <span>{{ item.data2}}</span>
            <span>{{ item.data3 }}</span>
            <span>{{ item.data4}}</span>
            <span>{{ item.data5}}</span>
            <span>{{ item.data6}}</span>
            <span>{{ item.data7}}</span>
            <span>{{ item.data8}}</span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
</template>
 <script>
export default {
 data() {
    return {
      // 滚动配置项
      optionSingleHeightTime: {
        step: 0.1, //速度
        limitMoveNum: 6, //数量
      },
       header: ['姓名', '证件类型', '证件号码', '互认机构', '互认科室', '互认医生', '互认项目名称', '有效期'],
      listData: [
        {
          data1: '张**1',
          data2: '社保卡',
          data3: '5245****36378',
          data4: '云南省第一附属医院',
          data5: '内科',
          data6: '韩*',
          data7: '白细胞',
          data8: '2天',
        },
        {
          data1: '张**2',
          data2: '社保卡',
          data3: '5245****36378',
          data4: '云南省第一附属医院',
          data5: '内科',
          data6: '韩*',
          data7: '白细胞',
          data8: '2天',
        },
        {
          data1: '张**3',
          data2: '社保卡',
          data3: '5245****36378',
          data4: '云南省第一附属医院',
          data5: '内科',
          data6: '韩*',
          data7: '白细胞',
          data8: '2天',
        },
        {
          data1: '张**4',
          data2: '社保卡',
          data3: '5245****36378',
          data4: '云南省第一附属医院',
          data5: '内科',
          data6: '韩*',
          data7: '白细胞',
          data8: '2天',
        },
        {
          data1: '张**5',
          data2: '社保卡',
          data3: '5245****36378',
          data4: '云南省第一附属医院',
          data5: '内科',
          data6: '韩*',
          data7: '白细胞',
          data8: '2天',
        },
        {
          data1: '张**6',
          data2: '社保卡',
          data3: '5245****36378',
          data4: '云南省第一附属医院',
          data5: '内科',
          data6: '韩*',
          data7: '白细胞',
          data8: '2天',
        },
        {
          data1: '张**7',
          data2: '社保卡',
          data3: '5245****36378',
          data4: '云南省第一附属医院',
          data5: '内科',
          data6: '韩*',
          data7: '白细胞',
          data8: '2天',
        },
      ],
    }
  }
}