vue 无限滚动插件

在线演示:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-others

cnpm install vue-seamless-scroll --save

引入

import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }

使用

复制代码
      <vueSeamless
        class="orderitem"
        :data="datalist"
        :class-option="optionHover()"
      >
        <ul class="item">
          <li v-for="item in datalist" :key="item.orderId">
            <router-link to="/mfgorder/order"
              >{{ item.name}}</router-link
            >
          </li>
        </ul>
      </vueSeamless>
复制代码

methods:

复制代码
    optionHover() {
      return {
        step: 0.5, //数值越大速度滚动越快
        limitMoveNum: 2, //开始无缝滚动的数据量  //this.fourDatata.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)
      };
    },
复制代码

css:

    .orderitem {
      height: 229px;
      overflow: hidden;
}

 

posted @   jqynr  阅读(150)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· Apache Tomcat RCE漏洞复现(CVE-2025-24813)
点击右上角即可分享
微信分享提示