首页 > 其他分享 >vue 无限滚动插件

vue 无限滚动插件

时间:2022-08-22 17:24:58浏览次数:100  
标签:direction vue 滚动 插件 seamless 单步 默认值

在线演示: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;
}

 

标签:direction,vue,滚动,插件,seamless,单步,默认值
From: https://www.cnblogs.com/jqynr/p/16613496.html

相关文章

  • idea集成maven插件和使用骨架创建maven的java工程
    idea集成maven插件     关闭设置界面   使用骨架创建maven的java工程     ......
  • 二进制部署k8s集群v1.23.9版本-13-安装CoreDns插件
    13.1、CoreDns概述简介:k8s的服务发现插件-CoreDnsCoreDns其实就是将service的名字和cluster-ip做一个自动关联部署k8s的内网资源配置清单http服务在192.168.1.200运......
  • Vue新建项目
    输入项目名teset2  自定义安装  选择所需要的包  选择vue版本  选择路由类型,是否选用历史路由(默认hash路由 选择scss  选择标准版eslint ......
  • vue动态添加class 三个以上的条件做判断(转)
    原文:https://blog.csdn.net/Akatsuki233/article/details/100653049:class="{'redRoom':Number(items.status)===1,'greenRoom1':Number(items.status)===2,green......
  • elementui table 表格使用固定列(fixed)之后滚动表格出现错行问题
        效果图,如上图  这里是初始化表格数据的     beforeDestroy(){this.tableBodyWrapper.removeEventListener('scroll',this.setSc......
  • vue父传子属性命名和封装组件命名问题(巨坑)
    在vue的中文官网有这样的说明:HTML中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM中的模板时,camelCase(驼峰命名法)的pr......
  • 直播小程序源码,CSS实现移动端横向滚动导航条
    直播小程序源码,CSS实现移动端横向滚动导航条cssHTML代码  <ul>            <li>              <ahref="">1</a>......
  • Vue中bus传值的理解
      说起bus你会想到什么?公交车?总线?在Vue中,对于任意两个组件之间的传值,就可以使用事件总线—bus。简单描述  在任意两个组件传值中,可以创建一个bus类负责事件派发、监听......
  • Vue 组件通信之 Bus
    bus详细描述:vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。bus适合小项目、数据被更少组件使用的项目,对于中大型项目数据在很多组件之间使用......
  • vue.ps1 报错
    XXX_fei这个根据自己电脑情况而定vue:无法加载文件C:\Users\XXX_fei\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本,这样的问题,需要使用管理员权限打开,然后......