vue列表自动滚动

最新推荐文章于 2024-08-05 08:00:00 发布

学不会190

最新推荐文章于 2024-08-05 08:00:00 发布

阅读量2.3k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_61672510/article/details/127287036

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

想要实现vue列表数据自动滚动，鼠标划入列表滚动停止

就是这样的效果

下面上代码

首先安装 npm install vue-seamless-scroll --save

npm install vue-seamless-scroll --save

在需要的页面引入

import vueSeamlessScroll from "vue-seamless-scroll";

使用

<vueSeamlessScroll
   :data="vehicleRecordListData"
   class="seamless-warp"
   :class-option="defaultOption"
 >
   <ul class="item">
      <li
           v-for="(item, index) in vehicleRecordListData"
           :key="index"
        >
                        <span class="title" v-text="item.inAutoPlate"></span>
                        <span class="date" v-text="item.vehicleCategory"></span>
                        <span class="date" v-text="item.isInOrOut"></span>
                        <span>{{ item.inOrOutTime | dateFormatValue }}</span>
                        <span>{{ item.inOrOutType }}</span>
                        <span>{{ item.inOrOutLaneName }}</span>
                      </li>
                    </ul>
                  </vueSeamlessScroll>

配置项

key	description	default	val
step	数值越大速度滚动越快	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number