美文网首页
vue实现列表自动滚动(vue-seamless-scroll)

vue实现列表自动滚动(vue-seamless-scroll)

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-03-22 22:00 被阅读0次

    一、第一步进行安装

    npm install vue-seamless-scroll --save
    

    二、引入

    2.1、全局引入

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

    2.3、单文件引入

    import vueSeamlessScroll from 'vue-seamless-scroll'; 
    export default {
      components: {
        vueSeamlessScroll
      },
    }
    

    三、使用

    注意滚动插件也需要绑定data作为滚动数据

    :data="dataList"
    
    <vue-seamless-scroll :data="dataList"
                               :class-option="classOption">
            <div v-for="(item, index) in dataList"
                 :key="index"
                 class="tr">
              <div class="td">{{ index + 1 }}</div>
              <div class="td">{{ item.name }}</div>
              <div class="td">{{ item.gradeName }}</div>
              <div class="td">{{ item.borrowCount }}</div>
            </div>
          </vue-seamless-scroll>
    
         classOption: {
            step: 0.4, // 数值越大速度滚动越快
            limitMoveNum: this.dataList.length, // 开始无缝滚动的数据量 this.dataList.length
            hoverStop: false, // 是否开启鼠标悬停stop
            direction: 1, // 0向下 1向上 2向左 3向右
            openWatch: true, // 开启数据实时监控刷新dom
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            waitTime: 2000
          },
          dataList: [],
    

    相关文章

      网友评论

          本文标题:vue实现列表自动滚动(vue-seamless-scroll)

          本文链接:https://www.haomeiwen.com/subject/zerbrdtx.html