列表无限循环滚动，缩放页面不会卡主

最新推荐文章于 2024-08-19 10:36:42 发布

蓝with黑

最新推荐文章于 2024-08-19 10:36:42 发布

阅读量469

点赞数

分类专栏： javasceipt vue 文章标签：前端

本文链接：https://blog.csdn.net/qq_24380731/article/details/124421022

版权

javasceipt 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

该博客展示了如何使用vue-seamless-scroll插件在Vue.js应用中创建一个列表无限滚动的效果，并且在鼠标上移时能够暂停滚动。代码示例中，配置了插件参数以控制滚动速度、方向、数据监控等，并定义了列表项的样式。这个功能对于长列表的用户体验提升有显著作用。

摘要由CSDN通过智能技术生成

列表无限滚动利用vue-seamless-scroll 插件,鼠标上移停止滚动
在这里插入图片描述

<template>
            <section class="list-content"  v-else id="list-content">
                 <vue-seamless-scroll :data="data" class="seamless-warp" :class-option="classOption">
                        <div  v-for="item in data" :key="item.index" class="item"   @on-click="onClick"  @click="onClick(item)">
                            <div >{{item.contractName}}</div>
                            <div>{{item.percent}}</div>
                        </div>
                 </vue-seamless-scroll>
            </section>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'list',
  components: {
      vueSeamlessScroll
  },
  props:{
      data:{
          type: Array,
          default: () => []
      },
  },
  data(){ },
   computed: {
 classOption () {
    return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
    }
 }
 },
}
</script>

<style lang="scss" scoped>
    .list{
        padding: 20px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
   
    .list-content{
        height: calc(100% - 38px);
        overflow: hidden;
    }
    .item{
        display: flex;
        border-bottom: 1px solid #4AFFF5;
        color: #fff;
        font-size: 14px;
        color: #fff;
        line-height: 38px;
        cursor: pointer;
        div{
            flex: 1;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            &:first-child{
                flex: 1.5;
            }
            &:nth-child(2){
                text-align: center;
            }
            &:nth-child(3){
                text-align: center;
            }
        }
    }
</style>