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 @ 2022-08-22 17:11  jqynr  阅读(162)  评论(0)    收藏  举报